Vue：编辑内容时防止在计算机列表中排序

Posted 2023-02-22

【中文标题】Vue：编辑内容时防止在计算机列表中排序

【英文标题】：Vue : prevent soring in computed list when editing content

【发布时间】：2018-07-22 14:41:37

【问题描述】：

我有一个计算的、排序的列表，它也是可编辑的..（使用 v-model="...." 输入）..

这很好用，除了在输入中键入新文本时列表会自行排序。我想以某种方式阻止这种情况..

有什么方法可以防止排序在 ex 上触发。 keypress 或使用某种自定义属性，如“new”、“editmode”？

计算道具：

nluData() 
            return orderby(this.$store.getters.nlujson.filter(item => 
                return item.intent.toLowerCase() === this.selectedIntent
            ), ['intent', 'text'], ['asc', 'asc'])
        ,

输入：

<div v-for="(item, key, index) in nluData">
    <input v-model="item.intent" class="form-control">
    ......
</div>

【参考方案1】：

您可以使用.lazy 修饰符来防止在输入事件后同步并等待更改事件。

<input v-model.lazy="item.intent" class="form-control">

有关文档，请参阅 here。

当您不想在更改事件后对列表进行排序时，您可以添加一个必须手动设置的布尔值（例如sortList），并且可以添加到nluData()。

【讨论】：

非常感谢@piscator :) 不知道这个功能，它确实很有用！.. 似乎在字段退出/焦点更改时触发了更改（神奇地？）？跨度>

不客气@TerjeNygård！ input 和 textarea 元素的更改事件确实在焦点更改后触发。