时间戳

首页 > 解决方案 > Vuetify v-text-field 在更改时不更新值。即使在 $forceUpdate()

vue.js - Vuetify v-text-field 在更改时不更新值。即使在 $forceUpdate()

问题描述

Vuetify v-text-field 在更改时不更新值。即使在 $forceUpdate() 和使用 $set 时

我尝试在没有 $forceUpdate 和 $set 的情况下使用它，但即使使用这两种方法它也不起作用

没有vuetify的例子： https : //jsfiddle.net/gu273qy0/3/

不适用于Vuetify的示例： https ://jsfiddle.net/gu273qy0/5/

此 javascript 可用于两个示例

new Vue({
  el: "#app",
  data: () => ({
    todos: ['']
  }),
  methods: {
    setText(index, todo){
        if (todo.toString().match(/^((([A-Z]{3})[UJZ](\d{0,7}))|[A-Z]{0,3})$/)) {
        this.$set(this.todos, index, todo)
      }

      this.$forceUpdate()
    },
    addText() {
        console.log(this.todos)
            this.todos.push('')
    }
  }
})

我希望完全相同的实现适用于 vuetify 和没有 vuetify。不幸的是，这种情况并非如此。只有非 vuetify 示例有效。

一个有效值或 todo 的例子是AAAU0101201.

无效值的示例是AAAA

标签： vue.jsvuetify.jsv-model

解决方案

我无法真正解释为什么使用或不使用 Vuetify 的结果不一样，但实际上，以 Vuetify 为例，如果输入错误的值，则不会修改 todos 数组，因此不会更新模型

我认为您应该例如处理@blur事件： https ://jsfiddle.net/v6m2tyrs/1/

推荐阅读