时间戳

首页 > 解决方案 > 为什么计算属性在 Vuetify 日期选择器上不能作为 v-model 工作？

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

问题描述

我为 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")
            ]
        }
}

标签： vue.jsvue-componentvuetify.js

解决方案

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

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

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

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

推荐阅读