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

我在控制台中有一个错误，它说：

相反，使用基于道具值的数据或计算属性。 道具正在变异：“sortType”

我的根文件包含一个api和一个过滤函数。我正在将这些数据发送到组件。一切都很好，直到我在filterList（）中添加了一些排序

这就是我接收排序类型的方式：

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

//滑块代码。。。
分类
最便宜的
最新的
道具：[“过滤器列表”、“滑块”、“滑块X”、“排序类型”]，
组成部分：{
vueSlider，
},
数据（）{
返回{
sortData:this.sortType
}
},
方法：{
过滤器列表（新类型）{
此.$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;
    },
}
}

数据（）{
返回{
api:[]，
排序类型：“”，
}
},
安装的（）{
获取（“ajax”）。然后（响应=>{
this.api=response.data
})
},
方法：{
},
计算：{
过滤器列表：函数（）{
让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））}）；
如果（this.sortType=='price'）{
filteredStates=filteredStates.sort（（上一个，当前）=>上一个价格-当前价格）；
}
if（this.sortType=='created_at'）{
filteredStates=filteredStates.sort（（上一个，当前）=>Date.parse（当前创建时间）-Date.parse（上一个创建时间））；
}
返回过滤状态；
},
}
}

---

好的，当我接收sortType时，我是否做错了什么？

您将

sortType

作为道具传递到子组件中，同时使用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)
        }
    }
}

有关问题:

---

相关文档：，

修复克隆[i]。应用

基本上，您只需将道具名称

filterList

更改为其他名称即可

新答案

这里有一个更新答案，prop

filterList

与方法中的名称相同，我认为这是冲突。另外，我确实认为您不需要将

filterList

方法从家长发送给孩子，因为您已经在通过

update:type

收听if了

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获得值。因为如果你想一想，如果它直接来自道具，那么编辑它也应该编辑道具

---

但我真的不知道为什么会这样，最好改天再问

选择选项是否没有默认值（页面加载时该值始终为

排序

）？如果是，则不必使用v型

如果它有默认值，请尝试使用

：value

而不是

v-model

，并使用props

sortType

作为值

此外，您不能在过滤器列表上使用相同的名称，请尝试为函数使用不同的变量

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

在父组件上

<app-toprow v-on:update:type="sortType = $event" :filterList="filterList" :slider="slider" :sliderX="sliderX" :sortType="sortType"></app-toprow>

谢谢您的回答。我唯一不明白的是。这部分

filterList（newType）{this.$emit（'update:type'，newType）}

我应该在我的filterList（）中的什么地方插入它？为什么不把这个片段放在

导出默认值{…}

的正下方

组件：

？你的意思是在子组件中进行

计算：{

并在内部使用该代码段？但我已经在使用filterList（）并接收该filterList（）来自父级。只需检查问题…因此…它没有意义…@AliD。我更新了我的答案。filterList应该进入子组件的方法。感谢您的更新。但我已经尝试过了。您可以在问题

filterList（）中看到

是父级中的函数，我也收到了它…这就是为什么我在子级中重新创建时会遇到错误。我需要在父级中使用

filterList（）

来进行排序/筛选…这就是为什么我会出现此错误：

方法“filterList”已经被定义为道具。

顺便说一句，用最新的代码更新了问题。我也在挂载的钩子中尝试过这样做，如

this.sortData=this.sortType

，但出现了此错误。

cloned[I].apply不是一个函数，假设
：
是你挂载的代码中的语法错误对不起，语法错误…但是你在哪里调用
克隆[i]。apply
？我确实需要发送
过滤器列表（）
，因为在
过滤器列表（）中
不仅仅是
sortType
还有其他过滤器，我希望所有过滤器都连接起来。这就是为什么发送它…例如，我的滑块过滤器工作正常…但是我的sortType没有运行…顺便说一下。
filterList（）
也包含了sortType过滤器。如果仔细看一下…我建议安装vue devtools（浏览器扩展）用于更好的调试…；）这是最好的答案。非常感谢。它现在像魔术一样工作。我不明白的是，
change（）
如何知道数据并与
filterList（）
交互，因为我的筛选代码在父级的filterList（）中。但是change（）函数知道这一点，并与之相互作用。尽管我没有像以前一样在
select
中提到
filterList（）
，但欢迎您！
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>