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

Question

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

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

DOES 的工作示例 WITHOUT 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 示例有效。

有效值或待办事项的示例是AAAU0101201。

无效值的一个例子是AAAA

Answer 1

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

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