Boolean data seems acting weirdly in vue's reactivity in vue 3

user_9911560 0
Viewed 1145

I'm trying to change a variable that has a data type 'boolean'. When the page is first loaded, the data works well. However, when the page is reloaded, the variable is updated locally in the method, but not in the global data section. Therefore in the console, I keep receiving an error "Uncaught (in promise) TypeError: Cannot read property 'value' of undefined at invokeDirectiveHook"

Is there something I've missed?

<template>
  <p>Value: {{ val }}</p>
  <button @click="changeMe">Click Me</button>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      val: ref(false);
    },
  },
  methods: {
    changeMe() {
      this.val = !this.val;
    }
  }
}
</script>
vue-reactivity vuejs3 vue.js runtime-error javascript
1 Answers

please don't mix the options API with the composition API

Options API

Vue.createApp({
  data() {
    return {
      val: false
    }
  },
  methods: {
    changeMe() {
      this.val = !this.val
    }
  }
}).mount('#demo')
<script src="https://unpkg.com/vue@next"></script>

<div id="demo" class="demo">
  <p>Value: {{ val }}</p>
  <button @click="changeMe">Click Me</button>
</div>

Composition API

const { createApp, ref } = Vue;
const app = createApp({
  setup() {
    let val = ref(false)
    
    function changeMe() {
      val.value = !val.value
    }

    return {
      val,
      changeMe
    }
  }
});
app.mount("#app");
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
   <p>Value: {{ val }}</p>
  <button @click="changeMe">Click Me</button>
</div>

Compositions API (short)

// Composition API
<template>
  <p>Value: {{ val }}</p>
  <button @click="changeMe">Click Me</button>
</template>

<script setup>
import { ref } from 'vue'

const val = ref(false)

function changeMe() {
 val.value = !val.value
}
</script>

the <script setup> is now included in the 3.2 version

user_118691000
Related