我在使用 v-combobox 时遇到问题。 (看
Code Example ).
如果我执行以下操作,则会出现问题:
- 在组合框中输入一个字符串
- 在组合框失去焦点之前点击保存按钮。
- 方法save()被执行
- console.log() 返回之前的值而不是实际值。
如何在执行保存命令的过程中获取“value”的实际值?
<template>
<v-app>
<div id="app">
<v-card>
<v-card-text>
<v-container>
<v-combobox v-model="value" label="write"></v-combobox>
</v-container>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="secondary" @click="save">save</v-btn>
</v-card-actions>
</v-card>
</div>
</v-app>
</template>
<script>
export default {
name: "App",
data() {
return {
addDialog: "false",
value: ""
};
},
methods: {
save() {
console.log(this.value);
this.addDialog = false;
}
}
};
</script>
最佳答案
那么让我们从正确完成的事情开始:
- 您的组合框已正确地 v 建模到您的值数据变量。
- 您在 save() 方法中正确引用了数据变量。
但是,对于组合框,默认行为是 v-model 变量不会实际更新,直到您失去对输入的关注。如果您尝试使用上面的代码,在组合框中写一些东西,然后单击/跳出它,然后单击保存,它应该会按您预期的那样工作。
为了让它自动工作,我们实际上可以通过使用模糊方法在 save() 中失去组合框的焦点。
首先,向您的组合框添加一个引用。然后,调用这个 ref 的 blur 方法作为你在保存函数中做的第一件事。最后,我们需要使用 nextTick 来确保该值已完全更新,然后再尝试对其进行 console.log。代码的更新部分如下所示:
<v-container>
<v-combobox v-model="value" ref="myComboBox" label="write"></v-combobox>
</v-container>
...
save() {
this.$refs["myComboBox"].blur();
this.$nextTick(() => {
console.log(this.value);
this.addDialog = false;
});
}
关于javascript - Vuetify 组合框中更新模型的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63896901/