我在使用v组合框时遇到问题。（请参阅Code Example）。
如果执行以下操作，则会出现此问题：
1.在组合框中输入字符串
1.在组合框失去焦点之前单击保存按钮。
1.执行保存（）方法
- 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>
2条答案
按热度按时间vcirk6k61#
让我们从正确的做法开始：
1.您的下拉式方块已正确地以V模式建立至您的值数据变数。
1.您在保存（）方法中正确引用了数据变量。
然而，使用组合框时，默认行为是，在您失去输入焦点之前，v-model变量实际上不会更新。如果您尝试使用上面的代码，在组合框中写入一些内容，然后单击/退出组合框，然后单击保存，它应该会按您预期的方式工作。
为了让它自动工作，我们实际上可以通过使用blur方法，使保存（）中的组合框失去焦点。
首先，在组合框中添加一个ref。然后，在保存函数中首先调用该ref的blur方法。最后，我们需要使用nextTick来确保value已经完全更新，然后再尝试将其写入console.log。更新后的代码部分如下所示：
ldioqlga2#
您可以只用途：search-input.sync标记而不是v-model.在您的情况下：
就像那样