[Vue warn]:P roperty 或方法 "index" 未在实例上定义，但在渲染期间引用

Question

<div class="input-wrapper" id="name" :data-text="name" :class="{ error: error.isErrorName }">
<input type="text" name="name" placeholder="Name…" @input="inputName($event.target.value)">
</div>

data () {
return {
name:'',
error:{
isErrorName:false,
isErrorEmail:false,
isErrorSubject:false,
isErrorMessage:false
},
}
},
methods:{
inputName(val){
this.name=val;
this.error.isErrorName = !val.trim();
}
}

[Vue 警告]：属性或方法"index"不是在实例上定义的，而是在渲染过程中引用的。通过初始化属性，确保此属性在 data 选项中或对于基于类的组件是反应性的。

Answer 1

假设您正在尝试避免该警告，有关幕后发生的事情的解释，请参阅这篇文章。

要删除您情况下的警告，请尝试如下：

网页模板

使用v-model将变量传递给方法，并删除简洁的($event.target.value)和@input(请参阅使用组件模型(。例如，您将它绑定到 data 属性name，如果您想在每次用户按下键时运行该inputName方法：

<input type="text" name="name" placeholder="Name…" v-model="name" @keyup="inputName">

脚本

然后，您无需将其添加

为

methods: {
inputName(){
// this.name=val;
this.error.isErrorName = !(this.name.trim());
}
}

PS：如果你有一个更明显的目标，我试着读懂你的想法。请在问题;)中分享