使用 Vue.js 过滤列表 [英] Filter list with Vue.js
问题描述
我刚刚开始使用 Vue.js,这是我正在做的事情:我正在渲染一个产品列表,每个产品都有一个 name
、一个 gender
和 size
.我希望用户能够通过使用输入来输入性别来按性别过滤产品.
var vm = new Vue({el: '#product_index',数据: {性别: "",产品:[{名称:jean1",性别:女士",尺码:S"},{名称:jean2",性别:男士",尺码:S"}]},方法:{更新性别:函数(事件){this.gender = $(event.target).val()}}})<div v-for="product in products" v-if="..."><p>{{product.name}}<p>
<input v-on:change="updateGender">
我设法更新了性别,但过滤部分有问题.当页面加载时,我不想要任何过滤.在文档中,他们建议使用 v-if
但它似乎与此配置不兼容.
如果我使用 v-if
,我可以这样做:
v-if="product.gender == 性别"
但同样,这在页面加载时不起作用,因为性别为空.我找不到解决方法.
我应该如何处理这个问题?
使用计算属性 - 像这样(示例波纹管按类型过滤项目)
const app = new Vue({el: '#app',数据: {搜索: '',项目: [{名称:'Stackoverflow',类型:'开发'},{名称:'权力的游戏',类型:'意甲'},{名称:'乔恩·雪诺',类型:'演员'}]},计算:{过滤项目(){返回 this.items.filter(item => {返回 item.type.toLowerCase().indexOf(this.search.toLowerCase()) >-1})}}})
模板:
<div v-for="filteredItems 中的项目" ><p>{{item.name}}</p><input type="text" v-model="search">
演示:http://jsbin.com/dezokiwowu/edit?html,js,控制台,输出
I just got started with Vue.js and here is what I'm doing: I am rendering a list of products, and each product has a name
, a gender
and a size
. I'd like users to be able to filter products by gender, by using an input to type the gender.
var vm = new Vue({
el: '#product_index',
data: {
gender: "",
products: [{name: "jean1", gender: "women", size: "S"}, {name: "jean2", gender: "men", size: "S"}]
},
methods:{
updateGender: function(event){
this.gender = $(event.target).val()
}
}
}
)
<div v-for="product in products" v-if="...">
<p>{{product.name}}<p>
</div>
<input v-on:change="updateGender">
I managed to get the gender updated, but I have an issue with the filtering part. When the page loads, I don't want any filtering. In the documentation, they advise to use v-if
but it doesn't seem compatible with this configuration.
If I use v-if
, I could do:
v-if="product.gender == gender"
But again, this doesn't work when the page load because gender is empty. I couldn't find a workaround for this.
How should I approach this issue ?
Use computed properties - something like this (Example bellow filter items by type)
const app = new Vue({
el: '#app',
data: {
search: '',
items: [
{name: 'Stackoverflow', type: 'development'},
{name: 'Game of Thrones', type: 'serie'},
{name: 'Jon Snow', type: 'actor'}
]
},
computed: {
filteredItems() {
return this.items.filter(item => {
return item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1
})
}
}
})
Template:
<div id="app">
<div v-for="item in filteredItems" >
<p>{{item.name}}</p>
</div>
<input type="text" v-model="search">
</div>
Demo: http://jsbin.com/dezokiwowu/edit?html,js,console,output
这篇关于使用 Vue.js 过滤列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!