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

Question

当我点击名为“activityFrom”的日期选择器时，我在我的 Vue 中使用了两个“vuejs-datepicker”组件，select关闭日期选择器时的日期我' m 触发组件定义的函数“@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>

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

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "disabledDates"

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

Answer 1

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

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

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

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

Is there any way to change props value of a Vue Component from method?

vue.js

vuejs-datepicker