Question

我在Vue.js应用程序中使用v-calendar软件包。

我想将选定的数据范围值发送到父组件。为什么@change触发器不起作用？

Parent.vue：

<template>
    <div>
        <Child @setRange="setRange" :range="range"/>
    </div>
</template>

<script>
data() {
    return {
        range: this.range,
    }
},
mounted() {
    firstCallToPage();
},
methods: {
    firstCallToPage(){
        axios.get('URL').then(response => {
            let self = this;
            this.range = {
                start: response.startDate,
                end: response.endDate,
            };
        }
    },
    setRange(range_value) {
        this.range = range_value;
    }
}
</script>

Child.vue：

<v-date-picker class='v-date-picker'
                       mode='range'
                       v-model='rangeValue'
                       :show-day-popover=false
                       :max-date='new Date()'
                       show-caps
                       :input-props='{placeholder: "", readonly: true}'
                       @change="sendRange">
</v-date-picker>
props: {
    range: {
        type: Object,
    },
},

data() {
  return {
    rangeValue: this.range
  }
},

sendRange: function () {
    this.$emit('setRange', this.rangeValue);
}

控制台中

错误：

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: "range"

Answer 1

错误消息非常明显。问题是您给子组件（包含v-date-picker的子组件提供了一个道具，而您用v-model覆盖了该道具（v-model只是{{1}的语法糖） }和:value）。

使用@change值导出道具的值并将其用于操作：

data

Answer 2

试试@input 而不是@change。在 v-datetime-picker 中仅适用于 @input。

Answer 3

代替使用方法，您可以使用手表...

考虑您在对象范围内具有以下属性

range: {
   start:value,
   end: value
}

<v-date-picker class='v-date-picker'
                       mode='range'
                       v-model='rangeValue'
                       :show-day-popover=false
                       :max-date='new Date()'
                       show-caps
                       :input-props='{placeholder: "", readonly: true}'
                       >
</v-date-picker>
props: {
    range: {
        type: Object,
    },
},
watch: {
  'rangeValue.start': function(newVal){
      this.$emit('setRange', newVal);
  }
},
data() {
  return {
    rangeValue: this.range
  }
}

为什么`@ change`触发器对v-data-picker不起作用？

3 个答案: