Laravel blade 中的 Vue 错误：属性 或方法 "type" 未在实例上定义但在渲染期间被引用

Question

关于我在 Vue 中遇到的这个错误需要一些帮助：属性 或方法“类型”未在实例上定义但在渲染期间被引用。

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' });

Blade代码：

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

Answer 1

此处有 2 个问题需要解决：

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

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

2. 您不能在 data 中引用 DOM，因为它是在 构建 DOM 之前 实例化的。所以你应该阅读并分配 mounted 挂钩中的值。
   见 Vue lifecycle.

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

甚至更好（“Vue 方式”）：

<input ref="type"/>

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

另请参阅：Refs