为什么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-modelv-on:change。你发送this.currentCompany,我认为应该是selectedCompany。如果想要在更改时发送值,请在值上放置watch,而不是在窗口小部件上。小部件提供值,值为商店提供。

以上是关于为什么V-select值会在第二次点击而不是第一次点击时发生变化?的主要内容,如果未能解决你的问题,请参考以下文章

第二次点击后出现文本字段的键盘(不时)

为啥按钮只有在第二次点击后才起作用? (反应)

jQuery - 更改 iframe src 时仅在第二次单击时触发

为什么Ajax没有在第二次点击时填充DIV?

翻译动画在第二次点击之前被忽略

Jquery .remove() 仅在第二次点击时起作用