首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >bootstrap-vue可编辑表复原值,如果出错

bootstrap-vue可编辑表复原值,如果出错
EN

Stack Overflow用户
提问于 2019-04-30 19:43:22
回答 2查看 1.1K关注 0票数 4

我正在使用vue js和bootstrap-vue来创建一个可编辑的表,允许用户使用v- on :change assisting在表上进行更改以帮助axios更新数据库。限制是语言是唯一的,并且不能是空字符串,如果用户犯了错误,我似乎无法恢复该值。对此推荐的方法是什么?任何帮助都是非常感谢的。

我尝试通过执行以下操作来“刷新”该表:

代码语言:javascript
复制
this.languages = this.languages;

似乎不会刷新表中的值。

桌子上的一段vue组件:

代码语言:javascript
复制
<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导出默认的方法中:

代码语言:javascript
复制
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;
    }
}

在计算中:

代码语言:javascript
复制
filtered() {
    return this.search ? this.languages.filter(language=>
        language.name.toLowerCase().includes(this.search.toLowerCase())) : this.languages;
}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-02 23:36:41

我找不到任何解决方案来刷新:值,所以我最终强制重新呈现组件。不是很理想,但至少整个组件都被刷新了。会喜欢任何更好的方法来实现这一点,而不是重新渲染。

票数 3
EN

Stack Overflow用户

发布于 2019-05-14 07:22:09

Vue不保留输入的“初始”值,因为它依赖于您的数据模型作为真理的来源。

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

此外,如果您在多行中有输入,最好在输入上设置一个唯一的key,或者如果您有一个唯一的键字段(每个项目行的值是唯一的),那么在b-table上设置primary-key属性,让它为每个TR元素生成一个唯一的Vue key

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55920207

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档