Question

控制台出现错误，提示：

相反，请根据道具的值使用数据或计算属性。道具被突变：“ 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时我做错什么了吗？

Answer 1

select选项是否没有默认值（页面加载时该值始终为sorting）？如果是的话，您不必使用v-model

如果它具有默认值，请尝试使用:value代替v-model，并使用道具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>

Answer 2

您将v-model作为prop传递到子组件中，同时使用select中的<div id="toprow"> // slider codes... <select id="sortBox" v-model="selectedSort" v-on:change="filterList"> <option value="">sorting</option> <option value="price">cheapest</option> <option value="created_at">newest</option> </select> </div> export default { data() => ({ selectedSort: this.sortType }) props:["filterList", "slider", "sliderX", "sortType"], components: { vueSlider, }, methods: { filterList(newType){ this.$emit('update:type', newType) } } }对其进行了突变，从而收到此错误。

您的子组件应类似于：

v-on:change=filterList

现在在<app-toprow v-on:update:type="sortType = $event" :filterList="filterList" :slider="slider" :sliderX="sliderX" :sortType="sortType"></app-toprow>上，您应该在父级上发出一个自定义事件，通知他排序已更改。

在父级上这样子：

cur

相关的SO问题：https://stackoverflow.com/a/51722100/7482509 相关文档：https://vuejs.org/v2/guide/components-custom-events.html，https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

Answer 3

FIX FOR CLONED [i] .apply

Vue 2 - Uncaught TypeError: cloned[i].apply is not a function at HTMLInputElement.invoker (vue.esm.js?65d7:1810) error

基本上，您应该将道具名称filterList更改为其他名称

新答案

这是一个更新的答案，prop filterList与我认为是冲突的方法中的名称相同。我也确实认为您不需要将filterList方法从父母发送给孩子，因为您已经在通过update:type

进行监听了

methods: {
    filterList(event){
        // use the v-model reactive feature..
        this.$emit('update:type', this.sortData)
        // if you don't like this.sortData -> uncomment below
        // this.$emit('update:type', event.target.value)
    }
}

OLD

为什么不使用mounted()初始化sortData: this.sortType ...

data() {
    return {
        sortData: null
    }
},
mounted() {
  this.sortData = this.sortType
}

P.S。

只是我的理论... 我无法清楚解释为什么会这样，但是我确实认为这是因为vue是反应性的，并且所有数据值都不应直接来自prop。因为如果您考虑到它是否来自道具 DIRECTLY （直接），那么对其进行编辑也应该对道具进行编辑。

但是我真的不知道为什么要这么做，最好再问一遍。

从父组件vue.js接收数据：道具被突变，

3 个答案: