Vuetify Combobox 未更新为正确的值

Question

我有一个 Vuetify 组合框，它在保存时执行 api 调用以存储所选或输入的值。但是，在更新此值时，如果直接单击保存按钮而不取消选择组合框，则会再次存储先前存储的值，而不是新值。只有当我手动取消选择该框或按 enter 时，才会存储正确的值。我环顾四周，发现某些对其他人有用的修复程序，例如 .blur() 和 .$nextTick，但它们似乎对我不起作用（我可能实施不正确）。这是我拥有的：

组合框：

<v-combobox
  :items="suggestions"
  v-model="editedItem.field_label"
  label="Label"
  outlined
  dense
  ref = "comboBox"
></v-combobox>

保存按钮：

<v-btn color="blue darken-1" text @click="save"> Save</v-btn>

保存功能：

save() {
  this.$refs.comboBox.$emit("blur")
  this.$nextTick(() => {
    const device_field = {
      ...this.editedItem,
    };
      device_field_api
        .updateDeviceField(device_field, this.device_id)
        .then((r) => {
          //Various logging items
          );
        })
        .finally(this.initialize())
        .catch((e) => {
          //Error catching
          );
        });
    });
  }

Answer 1

改变 this.$refs.comboBox.$emit("blur") 对此： this.$refs.comboBox.blur().

Codepen example

结果：

Vuetify Combobox 未更新为正确的值

Vuetify Combobox not updating to correct value

combobox

vue.js

vuetify.js