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

Question

我做了一个小提琴，我试图通过代码更改数组的一个值，同时它被用作来自 Vuetify 的v-text-field的 v- v-model 。

问题是，当我在文本字段中写一些东西时，它确实会立即正确更改值，所以我制作了一个按钮，在该特定索引中设置数组的值，它似乎不起作用，所以我制作了另一个按钮打印它，它确实有效。

第一个按钮将值更改为 0，但在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]) } } })

 <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-layout row wrap> <v-flex xs4> <div class="headline">Change value of model[0]</div> <div class="headline text-xs-center">{{model[0]}}</div> </v-flex> <v-flex xs8> <v-text-field solo v-model="model[0]"></v-text-field> </v-flex> <v-flex xs12> <v-btn @click="restart ()">Reset to 0</v-btn> <v-btn @click="showInConsole ()">Show in console current value</v-btn> </v-flex> </v-layout> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script> </body> </html>

链接到我的小提琴

Answer 1

这是Vue 反应性问题。

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

你应该使用Vue.$set

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

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-01-10 07:06:00

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-01-10 07:06:00

解决方案1
2 已采纳 2019-01-10 07:06:00