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

lnlaulya  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(336)

我在使用v组合框时遇到问题。(请参阅Code Example)。
如果执行以下操作,则会出现此问题:
1.在组合框中输入字符串
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>
vcirk6k6

vcirk6k61#

让我们从正确的做法开始:
1.您的下拉式方块已正确地以V模式建立至您的值数据变数。
1.您在保存()方法中正确引用了数据变量。
然而,使用组合框时,默认行为是,在您失去输入焦点之前,v-model变量实际上不会更新。如果您尝试使用上面的代码,在组合框中写入一些内容,然后单击/退出组合框,然后单击保存,它应该会按您预期的方式工作。
为了让它自动工作,我们实际上可以通过使用blur方法,使保存()中的组合框失去焦点。
首先,在组合框中添加一个ref。然后,在保存函数中首先调用该ref的blur方法。最后,我们需要使用nextTick来确保value已经完全更新,然后再尝试将其写入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;
    });
}
ldioqlga

ldioqlga2#

您可以只用途:search-input.sync标记而不是v-model.在您的情况下:

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

就像那样

相关问题