Laravel 刀片中的 Vue 错误：属性或方法“类型”未在实例上定义，但在渲染期间引用

Posted 2023-03-14

【中文标题】Laravel 刀片中的 Vue 错误：属性或方法“类型”未在实例上定义，但在渲染期间引用

【英文标题】：Vue error in Laravel blade: Property or method "type" is not defined on the instance but referenced during render

【发布时间】：2021-03-01 04:01:33

【问题描述】：

对于我在 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' );

刀片代码：

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

【问题讨论】：

主要组件中的type prop在哪里？

@Anatoly 感谢您的回复。 “类型”变量在组件的数据中定义。

不知道type 可以访问inside 组件而不是外部。

即使我在组件中添加了一个div，例如：` 测试 `我仍然遇到同样的错误

没错。你应该在你使用它的地方声明test，即你描述<div id="content-text-area-div">的地方

【参考方案1】：

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

type 应该在父组件中定义：

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

您不能在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