为什么V-select值会在第二次点击而不是第一次点击时发生变化?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么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>
答案
不要同时做v-model
和v-on:change
。你发送this.currentCompany
,我认为应该是selectedCompany
。如果想要在更改时发送值,请在值上放置watch
,而不是在窗口小部件上。小部件提供值,值为商店提供。
以上是关于为什么V-select值会在第二次点击而不是第一次点击时发生变化?的主要内容,如果未能解决你的问题,请参考以下文章