javascript - Vuelidate:设置 $model 不更新组件

Question

给定以下使用 Vuetify 和 Vuelidate 的 Vue 组件:

<template>
    <div id="app">
        <v-date-picker v-model="$v.picker.$model"></v-date-picker>
    </div>
</template>

<script>
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { required } from 'vuelidate/lib/validators'

Vue.use(Vuetify)

new Vue({
  el: "#app",
  data() {
    return {
      picker: new Date().toISOString().substr(0, 10)
    };
  },
  validations: {
    picker: {
      required
    }
  }
});
</script>

我想以编程方式更改 this.picker 的值。我尝试同时更改 v-model 和 Vuelidate $model:

this.picker = new Date().toISOString().substr(0, 10)

和

this.$v.picker.$model = new Date().toISOString().substr(0, 10))

它们都没有导致 UI 发生变化，也没有产生错误消息。

如何以编程方式更新 DatePicker 的值？

Answer 1

尝试将 v-model 分配给 picker而不是 $v.picker.$model .

您说您尝试更改 v-model，但这应该有效。

<v-date-picker v-model="picker"></v-date-picker>