Why does V-select value changes on second click instead of first?

Question

I have a V-select like below, and when I load the page it gets filled with data from my Vuex-store. I then have a computed property to get the currently selected company. My problem is that the value from the currently selected company only updates after I click on it Twice. Have I done something wrong in the implementation?

So when a user changes value in the V-select I want to update the list of users being shown, but this only works if the user clicks twice on the v-select selection.

<template>
  <v-container fluid fill-height>
    <v-layout child-flex>
      <v-card>
        <v-card-title>
          <h3>Användare</h3>
          <v-spacer></v-spacer>
            <v-select
              v-bind:items="listOfCompanys"
              v-model="selectedCompany"
              item-value="customerid"
              item-text="name"
              single-line
              bottom
              v-on:change="onChangeCompany"
              autocomplete></v-select>
        </v-card-title>
      <UserTable></UserTable>
    </v-card>
  </v-layout>
  </v-container>
</template>

  <script>
  import { FETCH_COMPANY_LIST, FETCH_USER_LIST } from '../store/actions.type'

  import UserTable from './UserTable.vue'
  export default {
    name: 'Users',
    data: () => ({
      selectedCompany: 0
    }),
    components: {
      UserTable
    },
    methods: {
      onChangeCompany () {
        this.$store.dispatch(FETCH_USER_LIST, this.currentCompany)
      }
    },
    mounted: function () {
      this.$store.dispatch(FETCH_COMPANY_LIST)
    },
    computed: {
      listOfCompanys () {
        return this.$store.state.users.companyList
      },
      currentCompany () {
        return this.selectedCompany
      }
    }
  }
  </script>

Can you post your template as well? – sliptype Mar 01 '18 at 22:33 — sliptype, Mar 01 '18 at 22:33

score 0 · Answer 1 · answered Mar 01 '18 at 23:10

Don't do both v-model and v-on:change. You're sending this.currentCompany, which I think is supposed to be selectedCompany. If the idea is to send the value when it changes, put a watch on the value, not on the widget. The widget feeds the value, the value feeds the store.

Why does V-select value changes on second click instead of first?

1 Answers1