gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 00:25:15 26 4
gpt4 key购买 nike

我做了一个 fiddle ,试图通过代码更改数组的一个值,同时将其用作 Vuetify 的 v-text-fieldv-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>

Link to my fiddle

最佳答案

这是 Vue reactivity problem .

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

你应该使用Vue.$set

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

关于javascript - 更改 v-model 的值并更新 v-text-field,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54123180/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com