有没有办法从方法中更改 Vue 组件的 props 值？

问题描述

当我单击名为“activityFrom”的日期选择器并在关闭日期选择器时选择日期时，我在我的 Vue 中使用了两个“vuejs-datepicker”组件我正在触发组件定义的函数“@selected”我在哪里需要更改第二个日期选择器“activityTo”的道具，它是 disabledDates 道具。

这是我的第一个组件

<datepicker  @selected="changeNextDate" v-model="$v.fields.activityFrom.$model" :disabledDates="disabledDates" ></datepicker>

这是我的第二个组件

<datepicker ref="activityTo" v-model="$v.fields.activityTo.$model" :disabledDates="disabledDates" ></datepicker>

这是我的代码

<script>
import Datepicker from 'vuejs-datepicker';     
import moment from 'moment'; 
export default {
    name:'Home',data(){
        return{
            fields:{
                destination:'',activityFrom:'',activityTo:'',},disabledDates:{
                to: new Date((new Date().getTime()+(2*24*60*60*1000)) -  8640000)
            },disabledDates2:{
              to: new Date((new Date().getTime()+(3*24*60*60*1000)) -  8640000)
            }

        }
    },components:{
        Datepicker
    },methods:{
       customFormatter(date) {
          return moment(date).format('MM/DD/YYYY');
       },changeNextDate(event){
            console.log('Date has been seleced');
            this.$refs.activityTo.disabledDates = disabledDates2;
       }
    }
}
</script> 

但是当我尝试从方法中更改道具时，它向我发送了以下错误

避免直接改变 prop，因为它的值会被覆盖 每当父组件重新渲染时。相反，使用数据或 根据道具的值计算出的属性。正在变异的道具： “禁用日期”

是否有任何更改道具的解决方案，因为我确实在单击第一个元素的功能时更改了第二个元素。请告诉我如何解决这个问题。

解决方法

您无需访问 this.$refs.activityTo 即可更新第二个组件的道具。由于道具是从你的父母传下来的，你可以在那里更新它们，例如：

changeNextDate(event){
  this.disabledDates = this.disabledDates2;
}

另外，我不确定您为什么使用 v-model 语法；我以前从未见过，我认为没有必要。您可以这样做：v-model="fields.activityFrom" 和 v-model="fields.activityTo"。