[Vue warn]:Property or method "index" is not defined on the instance but referenced during render

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]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Answer 1

Assuming that you are trying to avoid that warning, for the explanation of what's going on behind the scenes see this post.

And to remove the warning in your case, try it out like follows:

HTML template

Use v-model for passing the variable to the method and remove ($event.target.value) and @input for being concise (See Using-v-model-on-Components). For instance you bind it to the data property name and if you want to run that inputName method everytime a key is pressed by the user:

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

Script

Then, you do not need to add it as a parameter for the

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

P.S: I tried to read your mind, if you have a more obvious goal. Please share it in the question ;)