javascript - 在过滤/搜索问题后更改输入 - VueJS

Question

我是 VueJS 的新手，没有足够的经验来处理这个功能。
所以我创建了一个问题来提问(这个问题可能会重复)。

例如我使用computed来处理主要的过滤/搜索功能

computed: {
  filteredProducts: function () {
    return this.products.filter(product => product.name.includes(this.filter.name));
  }
}

下一步，我使用 filteredProducts

使用 v-for 指令呈现产品列表

<div v-for="product in filteredProducts" :key="product.id">
  <input type="text" v-model="product.name" />
</div>

我还有一个文本框，用户可以输入产品名称进行搜索

<input type="text" v-model="filter.name" />

通过在搜索输入中键入内容，产品列表会正确重新呈现。
当我尝试从产品名称输入中删除一些字符时出现问题，然后输入从列表中消失。
保持输入在编辑时出现的最佳方法是什么？

Answer 1

如果您想在尝试编辑产品名称时保留它们，请使用 :value 而不是 v-model，这样您就不会最终更改产品编辑他们的输入字段时的名称。 v-model 是一种双向数据绑定(bind)，而 :value 是一种单向数据绑定(bind)。更多关于它们差异的信息 here .

<div v-for="product in filteredProducts" :key="product.id">
  <input type="text" :value="product.name" />
</div>

<input type="text" v-model="filter.name" />