更改v-model的值并更新v-text-field

Question

我做了一个小提琴，尝试通过代码更改数组的一个值，同时将其用作Vuetify中v-model的{​​{1}}。

问题是，当我在文本字段中写入内容时，它确实会立即正确更改值，因此我创建了一个按钮，用于在该特定索引中设置数组的值，因此它似乎不起作用，因此我做了另一个按钮来打印它，它确实起作用。

第一个按钮将值更改为0，但在v-text-field中，它仍然具有最后键入的值。

如何在按下“重置”按钮时更改v-text-field的值？

v-text-field

new Vue({
  el: '#app',
  data() {
    return {
      model: [1, 2]
    }
  },
  methods: {
    restart() {
      this.model[0] = 0
    },
    showInConsole() {
      console.log("Current value:", this.model[0])
    }
  }
})

Link to my fiddle

Answer 1

它是Vue reactivity problem。

基本上，当您直接使用索引设置项目时，Vue无法检测到对数组的更改

您应该使用Vue.$set

restart () {
  this.$set(this.model, 0, 0)
}