[Vuejs]-How to reset the input field based on the ref/id in vuejs?

by

3👍

✅

You can call the ref, then call the element, and change it’s value.

resetNow(id){
    this.$refs[`input-${id}`].input.value = ""; //You may need to use .$el.value instead of .input.value
}

You will need to change your button to also pass the id number

v-on:click="resetNow(id)"

However, this is not a good way of accomplishing this. What you should be doing is resetting it’s value via the variable referenced in v-model on the input tag.

e.g.

resetNow(id){
    this.items[id].value = '';
}

I have created a codepen showing how to properly reset the fields here: https://codepen.io/pilotkid2011/pen/zYNpvPL

See also: how to set value to input field in vuejs

👤Marcello B.

Leave a comment