Laravel边栏选项卡中的Vue错误：属性或方法"type"未在实例上定义，但在渲染期间引用

Question

我想在Vue:Property或method中得到一些帮助来解决这个错误"类型"；未在实例上定义，但在渲染过程中被引用。

Vue代码：

Vue.component('content-text-area', {
data() {
return {
type: document.getElementById('type').value
}
},
mounted: function () {
console.log(this.type)
},
template: '<p>Testing</p>'
})
new Vue({ el: '#content-text-area-div' });

刀片代码：

<div id="content-text-area-div">
<content-text-area v-if="type === 'article'"></content-text-area>
</div>

Answer 1

这里有两个问题需要解决：

1. type应在父组件中定义：

new Vue({
el: '#content-text-area-div',
data() {
type: '' // Initialize it here
}
});

2. 您不能在data中重新引用DOM，因为它是在构建DOM之前实例化的。因此，您应该读取并分配mounted挂钩中的值
   查看Vue生命周期

mounted() {
this.type = document.getElementById('type').value
}

甚至更好("Vue方式"(：

<input ref="type"/>

mounted() {
this.type = this.$refs.type.value;
}

另请参阅：参考