Why is computed property not working as v-model on Vuetify date picker?

Question

I created a reusable component for Vuetify v-date-picker. I used props to allow setting of value from parent component to child component. Then I created a computed property in the child component for the date ranges to allow changes of props.

The v-date-picker selected the date range on first load but can't make any changes to it.

Template:

               <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>

Script

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;
            }
        },
}

But the selection works if I don't use a computed property as v-model from a prop.

Template:

               <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>

Script:

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

@MobinSamani I didn't get any error. I can't just select a range on v-date-picker if I used a computed property from prop value as v-model — Erron Intila

Lin Lin · Accepted Answer · 2021-03-06T07:39:55

First, to make it work with computed property, you can do it this way:

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

But you properly already noticed that you can just use data property as v-model, which is much simpler.

So back to the actual issue: you probably misunderstood computed property in Vue, computed property is NOT data property, it's a function that returns a value (computed/processed from other data sources), and Vue just allows you to access it like a property for convenience, which means it cannot be "set". For computed setter (I guess the name is bit misleading) it is a callback function when you assign a value to the computed property. You can find more details in the official doc: https://vuejs.org/v2/guide/computed.html#Computed-Setter. If you have some Python background, just imagine it's a class function with @property decorator, but Vue is even nicer as the computed property is reactive and cached.

Why is computed property not working as v-model on Vuetify date picker?

1 Answers