从父组件 vue.js 接收数据：prop 正在变异，

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

您将 sortType 作为 prop 传递给子组件，同时在 select 中使用 v-model 对其进行变异，从而收到此错误。

你的子组件应该是这样的：

<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>

相关的 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 2

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 更改为其他名称

新答案

这是一个更新答案，道具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)
    }
}

旧

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

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

附言

只是我的理论... 我无法清楚地解释为什么会发生这种情况，但我确实认为这是因为 vue 是响应式的，所有数据值都不应该直接来自 prop 的值。因为如果您考虑它是否来自道具 DIRECTLY 进行编辑，它也应该编辑道具..

但我真的不知道为什么会这样，最好下次再问。

Answer 3

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

如果它有默认值，尝试使用: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>