Я только начал работать с Vue.js, и вот что я делаю: я отображаю список продуктов, и у каждого продукта есть name
, gender
и size
. Я бы хотел, чтобы пользователи могли фильтровать товары по полу, используя данные для ввода пола.
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">
Мне удалось обновить пол, но у меня проблема с фильтрующей частью. Когда страница загружается, я не хочу никакой фильтрации. В документации они советуют использовать v-if
но он не выглядит совместимым с этой конфигурацией.
Если бы я использовал v-if
, я мог бы сделать:
v-if="product.gender == gender"
Но опять же, это не работает, когда страница загружается, потому что пол пуст. Я не мог найти обходной путь для этого.
Как мне подойти к этому вопросу?