bootstrap-vue editable table revert value if error

Question

I am using the vue js and bootstrap-vue to make an editable table, the user is allowed to make changes on the table with v-on:change assisting to axios update the database. The restriction is that the Languages are Unique and cannot be an empty string, I cannot seem to be able to revert the value if the user makes a mistake. What is the recommended approach to this? Any help is greatly appreciated.

I have tried to "refresh" the table by doing:

this.languages = this.languages;

Does not seem to refresh the value in the table.

a section of vue component on the table:

<b-table striped hover :items="filtered" :fields="fields">
    <template slot="name" slot-scope="data">
        <b-form-input type="text" :value="data.item.name" v-on:change="updateLanguage($event,data.item.id)"></b-form-input>
    </template>
</b-table>

in the methods of vue export default:

updateLanguage(e,id) {
    if(e.trim()){
        const find_langauge = this.languages.find(language=>{
            return language.name.toLowerCase() === e.toLowerCase();
        });
    find_langauge ? this.languages = this.languages : console.log('no match');
    } else {
        console.log('cannot be empty');
        this.languages = this.languages;
    }
}

in computed:

filtered() {
    return this.search ? this.languages.filter(language=>
        language.name.toLowerCase().includes(this.search.toLowerCase())) : this.languages;
}

Answer 1

I cannot find any solution to refresh the :value, so I ended up with force re-render of the component. Not ideal, but at least the entire component got refreshed. Will appreciate any better way to approach this instead of re-rendering.

Answer 2

Vue doesn't retain "initial" values for inputs, as it relies on your data modal as the source of truth.

You would need to store the initial value in data, and when detecting a reset, copy that initial value back to the v-model associated with the input.

Also, if you have inputs in multiple rows, it is a good idea to set a unique key on the input, and or if you have a unique key field (where the value is unique per item row), set the primary-key prop on b-table to have it generate a unique Vue key per TR element.