I've been attempting to update props from child to parent using the $event in an @click event.
I sent the data and $event from the parent to the child as shown below. in the parent component:
<v-filter
:sortTypePrice="sortTypePrice"
:sortTypeNewest="sortTypeNewest"
v-on:updatePrice="sortTypePrice = $event"
v-on:updateDate="sortTypeNewest = $event"
/>
data(){
return {
sortTypePrice: "",
sortTypeNewest: "",
}
}
computed: {
filterArticles(){
let filteredStates = this.api.filter((article) => {
return (this.keyword.length === 0 || article.address.includes(this.keyword))
});
if(this.sortTypePrice == "price") {
filteredStates = filteredStates.sort((prev, curr) => prev.price1 - curr.price1);
}
if(this.sortTypeNewest == 'created_at') {
filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
}
return filteredStates;
},
}
I received the props and performed the $event update. However, my @click event is not functioning as expected.
in the child component:
<ul>
<li v-model="sortPrice" @click="updatePrice" :value="price">lowest</li>
<li v-model="sortDate" @click="updateDate" :value="created_at">newest</li>
</ul>
props:["sortTypePrice", "sortTypeNewest"],
name: "controller",
data(){
return {
price: "price",
created_at: "created_at",
sortPrice:this.sortTypePrice,
sortDate:this.sortTypeNewest,
};
},
methods: {
updatePrice(e){
this.$emit("updatePrice", e.target.value)
},
updateDate(e){
this.$emit("updateDate", e.target.value)
}
}
I believe I may be approaching this the wrong way. If so, what would be the correct approach to achieve this functionality?