Vue搜索过滤器复选框问题答案

【问题标题】：Vue search filter checkbox issueVue搜索过滤器复选框问题
【发布时间】：2019-07-23 06:49:18
【问题描述】：

我对数组的复选框和 vue 过滤器有问题。

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ],
    search: '',
  },
  methods: {
  	
  },
  computed: {
  	filtered() {
      return this.todos.filter(todo => {
        return todo.text.toLowerCase().includes(this.search.toLowerCase())
      })
    },
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="search">
  <ol>
    <li v-for="todo in filtered">
      <label>
        <input type="checkbox">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

如果您首先从数组中检查并搜索其他任何一个：

检查 -> 学习 javascript

搜索 -> 学习 Vue

Vue 似乎被检查了..

假设是这样工作的吗？

如何从显示的列表中删除所有内容并同时追加？

【问题讨论】：

由于 vue 的优化，Vue 似乎需要检查。为每个复选框使用 v-model 以避免这种情况。
你能给出一个可行的例子吗？
真正的问题是，为什么会这样，我也很好奇。
@Deda 因为 vue 的优化过程。它使用虚拟 DOM 对 DOM 做尽可能少的更改。

标签： javascript vue.js

【解决方案1】：

使用v-model绑定到filtered数组中

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle",done:true},
      { text: "Build something awesome"}
    ],
    search: '',
  },
  methods: {
  	
  },
  computed: {
  	filtered() {
      return this.todos.filter(todo => {
        return todo.text.toLowerCase().includes(this.search.toLowerCase())
      })
    },
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="search">
  <ol>
    <li v-for="todo in filtered">
      <label>
        <input v-model="todo.done" type="checkbox">
          <del v-if="todo.done">{{ todo.text }}</del>
          <span v-if="!todo.done">{{ todo.text }}</span>
          
      </label>
    </li>
  </ol>
</div>

这里默认勾选Play around in JSFiddle

【讨论】：

这行得通，但是，我正在从数据库中获取“待办事项”作为数据......我需要为每个附加字段......
@Learner：什么附加字段？可以分享一下吗？
v 模型的那个，比如当我返回数据时，我返回 id、name 和在 todos 数组中我有带有 id 和 name 的对象，并且每个我需要为 v 模型添加完成
您能否在问题中添加此内容，以便我们更好地理解。
你回答了我的问题并且它有效，但是我需要为 v-model 的数据库中的每个结果添加自定义字段，或者在客户端添加它，但我需要全部完成并添加喜欢: todo[done] = false 或类似的东西，对于这样的事情来说似乎工作太多了......

【解决方案2】：

只需在 todos 中添加 done: false 并在 v-for 中添加 v-model="todo.done" 即可。

Example on JSFiddle

与您的代码的不同之处：

// added `done`
todos: [
  { done: false, text: "Learn JavaScript"},
  { done: false, text: "Learn Vue"},
  { done: false, text: "Play around in JSFiddle"},
  { done: false, text: "Build something awesome"}
]

<!-- added `v-model="todo.done"` -->
<input v-model="todo.done" type="checkbox">

【讨论】：

如何将done: false 添加到您的数据（JSON 对象数组）：for (var i in data) { data[i]['done'] = false; } 或 for (var i in data) { data[i].done = false; }
两种方式都应该有效。顺便说一句，最好在您的组件中使用变异（修改）数组创建一个计算方法并使用数组的 map 函数。像 computed: { todosWithMark() { return this.todos.map(todo => ({ ...todo, done: false})) } } 这样的东西并使用它。