在 Vuetify 组合框中更新模型时出现问题

Question

我在使用 v-combobox 时遇到问题。 （看 代码示例）。
如果我执行以下操作，就会出现问题：

1. 在组合框中输入字符串
2. 在组合框未获得焦点之前单击“保存”按钮。
3. 方法 save() 被执行
4. 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>

Answer 1

那么让我们从正确完成的事情开始：

1. 您的组合框已正确地根据您的值数据变量进行 v 建模。
2. 您在 save() 方法中正确引用了数据变量。

但是，对于组合框，默认行为是 v-model 变量实际上不会更新，直到您失去对输入的焦点。如果您尝试使用上面的代码，在组合框中编写一些内容，然后单击/跳出它，然后单击“保存”，它应该按您的预期工作。

为了让它自动工作，我们实际上可以通过使用模糊方法在 save() 中失去组合框的焦点。

首先，向组合框添加引用。然后，在保存函数中执行的第一件事就是调用该引用的模糊方法。最后，在尝试 console.log 之前，我们需要使用 nextTick 确保该值已完全更新。代码的更新部分如下所示：

<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;
    });
}

Answer 2

您可以只使用 :search-input.sync 标签而不是 v-model。 在你的情况下：

<v-combobox :search-input.sync="value" label="write"></v-combobox>

就这样

Answer 3

我刚刚使用了

v-autocomplete

组件解决了我的问题。

Answer 4

Shayan Khalighi的解决方案对我有用，但我想对输入值进行一些修改并希望它是一个数字，所以我使用了

@update:search-input="value = Number($event)"

。显然你也可以使用

@update:search-input="value = $event"

或使用你自己的修改。