如果错误，bootstrap-vue 可编辑表恢复值答案

【问题标题】：bootstrap-vue editable table revert value if error如果错误，bootstrap-vue 可编辑表恢复值
【发布时间】：2019-09-19 01:44:24
【问题描述】：

我正在使用 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导出默认的方法中：

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

【问题讨论】：

有人知道如何将值放入表中的事件中吗？如果我传递 on 更改整个对象而不仅仅是 ID，我可以从数组中获取原始值
e.target.value 似乎不起作用，因为 e 已经是有效负载。任何人都知道如何定位目标元素，以便我可以执行 $event.target.value = this.item.name 吗？
我试图将语言的状态从 vuex 加载到实例 this.languages 中，不更新输入实例中的 :value。

标签： vue.js bootstrap-vue

【解决方案1】：

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

【讨论】：

你是如何进行重新渲染的？有示例代码吗？
在父组件中，将 :key 添加到子组件。在子组件中通过 $emit 在父组件中触发 v-on:yourFunc 以更改 :key 中的值。这将导致子组件重新渲染。我相信 vue js 中有关于此的文档，但这不是我原来问题的正确解决方案。
我对 vue-bootstrap 没有任何经验，但是你可以将 b-form-input 包装在自定义组件中吗？如果是这样，您可以验证 b-form-input 响应并发出原始值或更改值。
bootstrap-vue 确实是 css 的救星，你应该试一试！无论如何，问题不在于发出原始值和更改值， :value 对数据没有反应（在这种情况下很好）。我似乎无法使用 VUE 将更改后的值恢复为数据，并且有人建议我做 vanilla DOM 不是 vue 方式。
我一定不明白这个问题，b/c 似乎包装在自定义组件中将允许您保留新旧值并防止用户选择无效语言时的任何数据更改。似乎另一个选择是使用 $refs 来获取输入的值。祝你好运。

【解决方案2】：

Vue 不保留输入的“初始”值，因为它依赖于您的数据模式作为事实来源。

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

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

【讨论】：