javascript - 更改 v-model 的值并更新 v-text-field
问题描述
我做了一个小提琴,我试图通过代码更改数组的一个值,而它被用作来自 Vuetifyv-model
的一个。v-text-field
问题是,当我在文本字段中写入内容时,它确实会立即正确更改值,所以我制作了一个按钮,用于在该特定索引中设置数组的值,它似乎不起作用,所以我制作了另一个按钮打印它,它确实有效。
第一个按钮根据我的需要将值更改为 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>
解决方案
这是Vue 反应性问题。
基本上,当您直接设置带有索引的项目时,Vue 无法检测到对数组的更改
你应该使用Vue.$set
restart () {
this.$set(this.model, 0, 0)
}
推荐阅读
- java - 从具有不同类型的通用类中检索一组值
- android - 固定对象的房间道查询
- git - 远程 Git 存储库与本地存储库不同步
- python - 将另一个图像粘贴到具有 Pillow (Python) 尊重透明度的图像中
- android - 如何创建像 google snapseed 这样的文本样式
- javascript - 如何在关闭选项卡上实现 Angular 10 中的注销并防止刷新或通过鼠标或键重新加载
- amazon-web-services - AWS 放大自定义域
- javascript - 什么是 req.user 以及它从哪里填充?
- java - @Scheduled 不适用于 Web 套接字和目标变量
- haskell - Graphics.Gloss.Interface.IO.Simulate包的更新功能中如何切换图片?