我在控制台中显示一个错误：
而是使用基于属性值的数据或计算属性。
变异的道具：“ sortType”
我的根文件包含一个api和一个过滤器功能。我正在将该数据发送到组件。一切都很好，直到我在filterList（）中添加了一些排序。
这就是我收到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)
}
}
下面是我的根文件...
<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;
},
}
}
好的，收到sortType时我做错什么了吗？
最佳答案
select选项是否没有默认值（页面加载时该值始终为sorting）？如果是，则不必使用v模型
如果它具有默认值，请尝试使用:value代替v-model，并使用props sortType作为值。
您也不能在filterList上使用相同的名称，请尝试对函数使用其他变量。
<div id="toprow">
// slider codes...
<select id="sortBox" :value="sortType" v-on:change="change">
<option value="">sorting</option>
<option value="price">cheapest</option>
<option value="created_at">newest</option>
</select>
</div>
改变功能
export default {
methods: {
change(e){
this.$emit('update:type', e.target.value)
}
}
}
在您的父组件上
<app-toprow v-on:update:type="sortType = $event" :filterList="filterList" :slider="slider" :sliderX="sliderX" :sortType="sortType"></app-toprow>