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;
}

anyone any idea how to put the value into the event in the table? I can get the original value from the array if I pass the on change the entire object instead of just ID — NewProgrammer
– NewProgrammer, Commented May 1, 2019 at 5:47
e.target.value does not seem to work as e already is the payload. Anyone any idea how to target the targetted element so i can do a $event.target.value = this.item.name ? — NewProgrammer
– NewProgrammer, Commented May 1, 2019 at 8:26
I have tried to load state of languages from vuex into the instance this.languages, does not update the :value in the input instance. — NewProgrammer
– NewProgrammer, Commented May 2, 2019 at 9:28

NewProgrammer · Accepted Answer · 2019-05-04 14:18:19Z

3

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.

edited May 4, 2019 at 14:18

answered May 2, 2019 at 15:36

NewProgrammer

2951 gold badge6 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

James A Mohler Over a year ago

How are you making the re-rendering happen? Do you have any sample code?

NewProgrammer Over a year ago

in the parent, add :key to child component. in child component trigger v-on:yourFunc in parent thru $emit to change value in :key. this will cause child component to re-render. i believe there is documentation in vue js on this, but this is not a proper solution to my original problem.

retrograde Over a year ago

I don't have any experience with vue-bootstrap, but can you wrap b-form-input in a custom component? If so, you could validate the b-form-input response and emit either the original or changed value.

NewProgrammer Over a year ago

bootstrap-vue is really a life saver when it comes to css, you should give it a whirl! anyway, the issue is not with emitting the original and changed value, the :value has no reactivity with the data(which is good in this case). I cannot seem to use VUE to revert the changed value back to the data, and I was advised doing vanilla DOM is not the vue way.

retrograde Over a year ago

I must not understand the problem, b/c it seems like wrapping in a custom component would allow you to hold the new and old value and prevent any data changes if the user selects an invalid language. Seems like the other option would be to use $refs to get the value of the input. Good luck.

|

Troy Morehouse · Accepted Answer · 2019-05-13 23:22:08Z

0

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.

answered May 13, 2019 at 23:22

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

Collectives™ on Stack Overflow

bootstrap-vue editable table revert value if error

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related