Vuelidate:设置$ model不会更新组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuelidate:设置$ model不会更新组件相关的知识,希望对你有一定的参考价值。

给定以下使用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的值?

答案

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

你说你试过改变v-model,但这应该有效。

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

以上是关于Vuelidate:设置$ model不会更新组件的主要内容,如果未能解决你的问题,请参考以下文章

Vuelidate 未正确验证表单数据

Vuelidate:使用子组件验证表单

Vuelidate sameAs 无法读取组件的数据

Vuelidate 打字

如何在 vuelidate 中动态设置验证字段

属性或方法“$v”未使用 Vuelidate 定义