bootstrap-vue editable table 如果出错返回值

Question

我正在使用 vue js 和 bootstrap-vue 制作 editable table，允许用户使用 v 在 table 上进行更改-on:change 协助axios更新数据库。限制是语言是唯一的，不能是空字符串，如果用户犯了错误，我似乎无法恢复该值。推荐的方法是什么？非常感谢任何帮助。

我尝试通过以下方式 "refresh" table：

this.languages = this.languages;

似乎没有刷新table中的值。

一段vue组件上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>

在vue默认导出的方法中：

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

在计算中：

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

Answer 1

我找不到任何刷新 :value 的解决方案，所以我最终强制重新渲染组件。不理想，但至少整个组件都得到了刷新。将欣赏任何更好的方法来解决这个问题而不是重新渲染。

Answer 2

Vue 不会保留 "initial" 输入值，因为它依赖于您的数据模态作为真实来源。

您需要将初始值存储在数据中，并在检测到重置时将该初始值复制回与输入关联的 v-model。

此外，如果您有多行输入，最好在输入上设置一个唯一的 key，或者如果您有一个唯一的键字段（每个项目的值都是唯一的）行），在 b-table 上设置 primary-key 道具，让它为每个 TR 元素生成一个唯一的 Vue key。

bootstrap-vue editable table 如果出错返回值

bootstrap-vue editable table revert value if error

vue.js

bootstrap-vue