Я хочу видеть результат поиска, когда я что-то набираю в поиске, если поиск пуст, то я хочу видеть все элементы.
но вызывается метод поиска, а затем состояние.инвентаризация не обновляется со всеми элементами
navbar.vue
<div class="input-field right">
<input @keyup="search" id="search" type="search" required v-model="keyword">
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<i class="material-icons">close</i>
</div>
export default {
data() {
return {
keyword: "",
};
},
methods: {
search()
{
if(this.keyword != "")
this.$store.dispatch("addToSearch", this.keyword);
},
inventory.vue
<div v-for="(item,index) in items" :key="index" class="col s12 m4">
export default {
computed: {
items() {
return this.$store.getters.getInventory;
}
},
mounted() {
this.fetchAllItem();
},
methods: {
fetchAllItem() {
axios.get("https://ekart-4c0aa.firebaseio.com/0/data.json")
.then(response => {
this.items=response.data;
console.log(this.items);
this.$store.commit("setInventory", response.data);
})
.catch(error => {
console.log(error);
});
},
store.js
mutations:{
addToSearch(state,payload){
if(payload != ""){
state.inventory= state.inventory.filter(item => {
return item.title.toLowerCase().includes(payload.toLowerCase());
});
} } }
actions: {
addToSearch(context,payload){
context.commit('addToSearch',payload)
},
Ожидаемый результат в 3 этапа: