时间戳

首页 > 解决方案 > 如果错误，bootstrap-vue 可编辑表恢复值

vue.js - 如果错误，bootstrap-vue 可编辑表恢复值

问题描述

我正在使用 vue js 和 bootstrap-vue 制作一个可编辑的表，允许用户使用 v-on: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 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;
    }
}

在计算中：

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

标签： vue.jsbootstrap-vue

解决方案

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

推荐阅读