is not defined on the instance but referenced during render but works as i want

Question

now im learning vuejs, and have some problem, i hope someone can help me.

i've index.html and app.js, when i run in browser in the console it printed :

vue.js:634 [Vue warn]: Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

but the question is, why the function still work when i click the button?

here is my complete code:

Vue.component('click-counter', {
  template: '<button @click="count++">{{ count }}</button>',
  data() {
    return {
      count: 0
    }
  }
})

Vue.component('click-counter-using-defined-template', {
  template: '#click-counter-template',
  data() {
    return {
      count: 0
    }
  }
})

new Vue({
  el: '#app'
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learning</title>
</head>
<body>
  <div id="app">
    <h1>learning component</h1>
    <!-- basic component -->
    <click-counter></click-counter>

    <!-- component template -->
    <!-- Remember! Component template must contain exactly one root element. -->
    <click-counter-using-defined-template></click-counter-using-defined-template>
    <script type="text/x-template" id="click-counter-template">
      <div style="border: 1px dashed orange;">
        <p>we re counter</p>
        <button @click="count++">{{ count }}</button>
      </div>
    </script>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="./app.js"></script>
</body>
</html>

zyrif zyrif · Accepted Answer · 2021-07-05T12:18:42

In your code, "text/x-template" is actually inside the div the vue instance is attached to. Vue documentation states that template definition in this manner needs to be outside the attached DOM element, By moving the template code outside the attached div, the warning goes away.

https://vuejs.org/v2/guide/components-edge-cases.html#X-Templates

Your x-template needs to be defined outside the DOM element to which Vue is attached.

In your code, Vue is encountering 'count' inside the attached div, but 'count' is not actually defined inside the root instance. The warning most likely stems from this.

is not defined on the instance but referenced during render but works as i want

1 Answers