Encountering an issue in the console with the following error message:
Instead, use a data or computed property based on the prop's value. Prop being mutated: "sortType"
Within my root file, I have an API and filter function sending data to components. Everything was working smoothly until I introduced sorting in the filterList() method.
This is how I am handling the sortType:
<div id="toprow">
// slider codes...
<select id="sortBox" v-model="sortData" v-on:change="filterList">
<option value="">sorting</option>
<option value="price">cheapest</option>
<option value="created_at">newest</option>
</select>
</div>
props:["filterList", "slider", "sliderX", "sortType"],
components: {
vueSlider,
},
data() {
return {
sortData: this.sortType
}
},
methods: {
filterList(newType){
this.$emit('update:type', newType)
}
}
Continuing from the root file...
<app-toprow v-on:update:type="sortType = $event" :filterList="filterList" :slider="slider" :sliderX="sliderX" :sortType="sortType"></app-toprow>
data(){
return {
api: [],
sortType:"",
}
},
mounted(){
axios.get("ajax").then(response => {
this.api = response.data
})
},
methods: {
},
computed: {
filterList: function () {
let filteredStates = this.api.filter((estate) => {
return (this.keyword.length === 0 || estate.address.includes(this.keyword)) &&
(this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &&
(this.regions.length === 0 || this.regions.includes(estate.region))});
if(this.sortType == 'price') {
filteredStates = filteredStates.sort((prev, curr) => prev.price - curr.price);
}
if(this.sortType == 'created_at') {
filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
}
return filteredStates;
},
}
}
Is there a mistake in how I am handling the sortType variable?