为什么计算属性在 Vuetify 日期选择器上不能作为 v-model 工作？

Question

我为 Vuetify v-date-picker 创建了一个可重用的组件。我使用道具来允许从父组件到子组件的值设置。然后我在子组件中为日期范围创建了一个计算属性，以允许更改道具。

v-date-picker 在首次加载时选择了日期范围，但无法对其进行任何更改。

模板：

               <v-date-picker
                    v-model="dateRange"
                    color="green"
                    no-title
                    range
                    scrollable
                >
                    <v-spacer></v-spacer>
                    <v-btn text color="primary" @click="onCancel">
                        Cancel
                    </v-btn>
                    <v-btn text color="primary" @click="onSave">
                        OK
                    </v-btn>
                </v-date-picker>

脚本

props: {
        range: {
            type: Array,
            default: () => {
                return [
                    moment()
                        .startOf("month")
                        .format("YYYY-MM-DD"),
                    moment()
                        .endOf("month")
                        .format("YYYY-MM-DD")
                ];
            }
        },
},
computed: {
        dateRange: {
            get() {
                return this.range;
            },
            set(value) {
                return value;
            }
        },
}

但如果我不使用计算属性作为来自道具的 v-model，则选择有效。

模板：

               <v-date-picker
                    v-model="dates"
                    color="green"
                    no-title
                    range
                    scrollable
                >
                    <v-spacer></v-spacer>
                    <v-btn text color="primary" @click="onCancel">
                        Cancel
                    </v-btn>
                    <v-btn text color="primary" @click="onSave">
                        OK
                    </v-btn>
                </v-date-picker>

脚本：

data() {
        return {
            dates: [
                moment()
                    .startOf("month")
                    .format("YYYY-MM-DD"),
                moment()
                    .endOf("month")
                    .format("YYYY-MM-DD")
            ]
        }
}

Answer 1

首先，要使其与计算属性一起工作，您可以这样做：

  computed: {
    dateRange: {
      get() {
        return this.range
      },
      set(value) {
        this.range = value
      },
    },
  },

但是您已经注意到，您可以将 data 属性 用作 v-model，这要简单得多。

回到实际问题：你可能误解了Vue中的计算属性，计算属性是NOT 数据属性 em>，它是一个返回值的函数（从其他数据源计算/处理），而 Vue 只是为了方便起见允许您像属性一样访问它，这意味着它不能被“设置”。对于computed setter（我猜这个名字有点误导）当你为computed property赋值时它是一个回调函数。您可以在官方文档中找到更多详细信息：https://vuejs.org/v2/guide/computed.html#Computed-Setter。如果你有一些 Python 背景，想象一下它是一个带有 @property 装饰器的类函数，但 Vue 更好，因为 computed 属性 是响应式和缓存的。