Question

我正在使用vue js和bootstrap-vue制作可编辑的表，允许用户使用v-on：change辅助在表上进行更改：change协助axios更新数据库。限制是语言是唯一的，并且不能为空字符串，如果用户输入错误，我似乎无法还原该值。推荐的方法是什么？任何帮助将不胜感激。

我尝试通过以下方式“刷新”表：

this.languages = this.languages;

似乎没有刷新表中的值。

表中的vue组件的一部分：

<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不会保留输入的“初始”值，因为它依赖于数据模式作为事实的来源。

您需要将初始值存储在数据中，然后在检测到复位时，将该初始值复制回与输入关联的v模型。

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

Bootstrap-Vue可编辑表如果发生错误将还原值

2 个答案: