Count not updating

Help
1

Hello, having a bit of an issue with component refresh. I’ve likely spent about ten hours on it, and for the life of me can’t figure it out. I’ve managed to replicate it with a simple example. I’ve added a plugin as menu option (next to Menu). When I click the menu I get the usual popup. But then when I click a button to change the value of a variable, it doesn’t change on the screen. If I close the popup and reopen it, the value is correctly displayed on the screen, so it appears to be a refresh problem.

Here’s the code.

<template>
  <h1>{{ count }}</h1>
  <button @click="increment()">Increase Count</button>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

const count = ref(0);

export default defineComponent({
  data() {
    return {
      count,
    };
  },
  setup() {
    function increment() {
      count.value = count.value + 1;
    }
    return { increment };
  },
});
</script>

<style>
/* Write CSS for this vue component */
</style>
2

you’re using a mix of the composition and options API of vue, I’m not sure it works to define a ref outside of defineComponent… You want to either define count in data in the old options way, in which case you’d define count in data and use it with this.count, or you use the new options API and then you want to define count as a ref. In this case:

<script lang="ts">
import { defineComponent, ref } from "vue";



export default defineComponent({
  setup() {
    const count = ref(0);
    function increment() {
      count.value = count.value + 1;
    }
    return { increment, count };
  },
});
</script>

Or more simply with the new script setup syntax

<script setup lang="ts">
import { defineComponent, ref } from "vue";

const count = ref(0);
function increment() {
   count.value = count.value + 1;
}
</script>

Probably worth reading this page of vue.js docs to understand what the new composition API is, what it’s for and how it’s different from the old one.

3

Thanks for the reply Liana, but I tried both of those approaches and the problem persists. Do I need to do anything special, a listener of some type? I also see you made a custom command in the demo plugin example (though I never managed to get that demo running, something about missing a default), so could that have anything to do with it?

4

There’s also the fact that it should be @click=“increment” and not @click=“increment()”

You need to give it the function, not call it. Otherwise you’re saying that the onclick is the result of calling increment, which is nothing

Otherwise outside of that, if this is just a vue component, it doesn’t really have anything to do with what narrat does and you need to look at vue docs or can even post on stack overflow or any place where people might know about vue.

But also maybe try copy pasting a simple example component from vue docs, or that counter plugin as a base to then modify

5

So something was wrong with my dependencies. I refreshed them and it started working.

On the bright side, I learned a heck of a lot about vue over the last two days :slight_smile:

I appreciate you being patient with my questions.