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

Question

当我单击名为“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，因为值会被覆盖 每当父组件重新渲染时。相反，使用数据或 基于道具值的计算属性。道具被变异： “禁用日期”

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

Answer 1

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

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

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