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 warn]：属性或方法“index”未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。

Answer 1

假设您正试图避免该警告，以解释幕后发生的事情see this post。

要删除您的案例中的警告，请尝试如下：

HTML模板

使用v-model将变量传递给方法，并删除($event.target.value)和@input以简洁（请参阅Using-v-model-on-Components）。例如，您将它绑定到数据属性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());
  }
}

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

[Vue警告]：属性或方法“index”未在实例上定义，但在呈现期间引用

1 个答案: