Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing v-model does not sync with vue-select internal value #1209

Closed
himat opened this issue Jun 13, 2020 · 3 comments · Fixed by #1210
Closed

Changing v-model does not sync with vue-select internal value #1209

himat opened this issue Jun 13, 2020 · 3 comments · Fixed by #1210
Labels

Comments

@himat
Copy link

himat commented Jun 13, 2020

Describe the bug

Here is a screen recording of the bug: https://www.loom.com/share/9830f13bce2540ae96d270d615083e58

What's happening is that when I click on the Add New Driver button, I call a function to make a new driver, and then also reset the driverPhone v-model prop to be null, so that should clear the v-select input field. (you can see this in the code below)

But this clearing only works the first two times. After that, the Add New Driver option appears to be stuck there and the @input event is not fired anymore until I select a different option before selecting the Add New Driver option again.

To Reproduce

<v-select
          v-model="driverPhone"
          @input="driverInputChanged"
          class="<omitted>"
          :options="driversSelectFmtd"
          label="nameWithPhone"
          :reduce="driver => driver.phoneNumber"
        >
          <template #no-options>
          <omitted>
          </template>
        </v-select>

...

export default Vue.Component("AddDelivery", {
..
data() {
    return {
      driverPhone: '',
    };
  },
methods: {
    driverInputChanged(val) {
      console.log(`\n\ndriver phone changed: ${val}`);

      // User clicked on adding a new driver
      if (val === ADD_DRIVER_OPTION) {
        // addNewDriverFunc();
        this.driverPhone = null; // this should reset the value of the v-select, but it isn't working when the same option is chosen repeatedly
      }
    },
...
}

Expected behavior
I expect that since I'm setting this.driverPhone = null; that I should be able to continually click on Add New Driver and it should always fire that event.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]
    MacOS, Chrome Version 83.0.4103.97 (Official Build) (64-bit)
    vue-select 3.10.3
@StevenInc
Copy link

I have the same issue

@himat
Copy link
Author

himat commented Jun 18, 2020

@StevenInc use the fix in #1210

@github-actions
Copy link

🎉 This issue has been resolved in version 3.10.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants