Почему значение V-select изменяется при втором щелчке вместо первого?
У меня есть V-select, как показано ниже, и когда я загружаю страницу, она заполняется данными из моего Vuex-магазина. Затем у меня есть вычисленное свойство, чтобы получить текущую выбранную компанию. Моя проблема в том, что значение из выбранной в настоящее время компании обновляется только после того, как я щелкну по нему дважды Я сделал что-то не так в реализации?
Поэтому, когда пользователь меняет значение в V-Select, я хочу обновить отображаемый список пользователей, но это работает только в том случае, если пользователь дважды щелкает по выбору V-Select.
<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>
1 ответ
Не делай обоих v-model
а также v-on:change
, Вы отправляете this.currentCompany
я думаю, что selectedCompany
, Если идея состоит в том, чтобы отправить значение при его изменении, введите watch
на значение, а не на виджет. Виджет кормит значение, значение кормит магазин.