Vuetify 组合框中更新模型的问题

Question

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

1. 在组合框中输入一个字符串

2. 在组合框未聚焦之前单击保存按钮。

3. 方法 save() 被执行

4. console.log() 返回前一个值而不是实际值。

如何在执行保存命令期间获取“值”的实际值？

<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

那么让我们从正确完成的事情开始：您的组合框已正确地 v 建模为您的值数据变量。您在 save() 方法中正确引用了数据变量。但是，对于组合框，默认行为是 v-model 变量不会实际更新，直到您失去对输入的关注。如果您尝试使用上面的代码，在组合框中写一些东西，然后单击/跳出它，然后单击保存，它应该会按您预期的那样工作。为了让它自动工作，我们实际上可以通过使用 blur 方法在 save() 中失去组合框的焦点。首先，将 ref 添加到您的组合框。然后，调用这个 ref 的 blur 方法作为你在保存函数中做的第一件事。最后，我们需要使用 nextTick 来确保该值已完全更新，然后再尝试对其进行 console.log。代码的更新部分如下所示：<v-container>&nbsp; &nbsp; <v-combobox v-model="value" ref="myComboBox" label="write"></v-combobox></v-container>...save() {&nbsp; &nbsp; this.$refs["myComboBox"].blur();&nbsp; &nbsp; this.$nextTick(() => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.value);&nbsp; &nbsp; &nbsp; &nbsp; this.addDialog = false;&nbsp; &nbsp; });}

Answer 2

你可以只使用 :search-input.sync 标签而不是 v-model。在你的情况下：<v-combobox&nbsp;:search-input.sync="value"&nbsp;label="write"></v-combobox>就这样