javascript - Problem with updating model in Vuetify combobox - Stack Overflow

admin管理员组

文章数量:1279021

i'm having problems with the v-bobox. (see Code Example).
The problem occurs if i do the following:

1. Enter a string into the bobox
2. Click the save button before the bobox is unfocused.
3. The method save() is executed
4. The console.log() returns the previous value and not the actual one.

How can i get the actual value of "value" during the execution of the save mand?

<template>
  <v-app>
    <div id="app">
      <v-card>
        <v-card-text>
          <v-container>
            <v-bobox v-model="value" label="write"></v-bobox>
          </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>

i'm having problems with the v-bobox. (see Code Example).
The problem occurs if i do the following:

1. Enter a string into the bobox
2. Click the save button before the bobox is unfocused.
3. The method save() is executed
4. The console.log() returns the previous value and not the actual one.

How can i get the actual value of "value" during the execution of the save mand?

<template>
  <v-app>
    <div id="app">
      <v-card>
        <v-card-text>
          <v-container>
            <v-bobox v-model="value" label="write"></v-bobox>
          </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>

• javascript
• vue.js
• bobox
• vuetify.js

Share Improve this question Follow edited Sep 15, 2020 at 8:40 H0fi asked Sep 15, 2020 at 7:17 H0fiH0fi 8311 silver badge55 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

So let's start with what's done correctly:

1. Your bobox is correctly v-modelled to your value data variable.
2. You are referencing the data variable correctly in your save() method.

However, with a bobox, the default behaviour is that the v-model variable is not actually updated until the you lose focus on the input. If you try with your above code, writing something in the bobox, then clicking/tabbing out of it, and then clicking save, it should work as you expect.

In order to get this to automatically work we can actually lose focus of the bobox within save(), by using the blur method.

Firstly, add a ref to your bobox. Then, call the blur method on this ref as the first thing you do in your save function. Finally, we need to use nextTick to ensure that value has been pletely updated, before trying to console.log it. The updated parts of the code look like this:

<v-container>
    <v-bobox v-model="value" ref="myComboBox" label="write"></v-bobox>
</v-container>

...

save() {
    this.$refs["myComboBox"].blur();
    this.$nextTick(() => {
        console.log(this.value);
        this.addDialog = false;
    });
}

You can just use :search-input.sync tag instead of v-model. in your case:

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

just like that

I just used the v-autoplete ponent that solved my problem.

Shayan Khalighi's solution worked for me but I wanted to do some modification on input value and wanted it to be a number so I used @update:search-input="value = Number($event)". Obviously you can also use @update:search-input="value = $event" or use your own modification.

本文标签： javascriptProblem with updating model in Vuetify comboboxStack Overflow