【Vue.js】エラーメモ

同じミスを数回繰り返してしまったのでメモ

エラー画面

「インスタンスで定義されていないのに、レンダーで参照されてるよ」とエラー

vue.runtime.esm.js:638
 [Vue warn]: Property or method "modalTask" 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.

丁寧に公式リンクが示されてるので確認。

Since Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value:

If you don’t declare message in the data option, Vue will warn you that the render function is trying to access a property that doesn’t exist.

初期化してないのが原因だった。 空の値を宣言すること。

var vm = new Vue({
  data: {
    // declare message with an empty value
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// set `message` later
vm.message = 'Hello!'

Reactivity in Depth — Vue.js