javascript - Vue搜索过滤器复选框问题
问题描述
我对数组的复选框和 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似乎被检查了..
是不是应该这样工作?
如何从显示的列表中删除所有内容并同时追加?
解决方案
用于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
推荐阅读
- python-3.x - 当我在 chrome web 驱动程序中加载带有活动登录名和书签等的用户数据 chrome 配置文件时,web 驱动程序 add_experimental_options () 不起作用
- lua - Roblox Studio Lua:使用本地脚本克隆
- sql - 如何从 Pentaho-Kettle 中基于动态选择的 sql 查询中获取结果集?
- ansible - Ansible jinja2 未使用 with_items 连接到列表
- javascript - 具有多个订阅的淘汰单个 observable
- javascript - 如何解决invariant Violation的错误:Native module cannot be null()
- r - 从源代码构建 R 3.6.0 不允许安装包
- arcgis-js-api - ArcGIS APi JS 3.28,panTo 不是函数
- python - 获取两个表面的差异图
- java - ojdbc8 DB_URL 用于故障转移