Question

我有一个v-data-table，可以从vuex-store获取数据。显示的数据由同一页面上的v-select控制。因此，当用户在v-select中选择公司时，v-data-tables数据将随用户更新。

我的问题是，当用户在v-select中选择公司然后转到另一个页面时，在重新输入页面时数据仍然存在，但v-select没有选择任何公司，因此视图不同步。

如何重置v-data-table以在重新进入页面时不显示任何数据？我已将vuex-store绑定到具有计算属性的v-data-table，因此我无法将其设置为null。任何想法

<template>
  <v-select
   v-bind:items="listOfLocations"
   v-model="selectedLocation"
   label="Kontor"
  item-value="locationid"
  item-text="name"
  single-line
  bottom
  ref="thisOne"
  autocomplete></v-select>

  <v-data-table
      :headers="headers"
      :items="listOfCompanys"
      hide-actions
      class="elevation-1">
      <template slot="items" slot-scope="props">
      <td>{{ props.item.customerid }}</td>  
      <td>{{ props.item.name }}</td>
      </template>
    </v-data-table>

  <script>
  import { FETCH_LOCOMPANY_LIST, FETCH_LOCATION_LIST, REMOVE_COMPANY, ADD_NEW_COMPANY } from '../store/actions.type'

export default {
    name: 'Companies',
    data: () => ({
      selectedLocation: null,
    }),
    watch: {
      selectedLocation: function (val, oldval) {
        this.$store.dispatch(FETCH_LOCOMPANY_LIST, val)
      }
    },
mounted: function () {
      this.$store.dispatch(FETCH_LOCATION_LIST)
      if (this.selectedLocation === null || this.selectedLocation === undefined) {
        this.listOfCompanys = null
      }
    },
    computed: {
      listOfLocations () {
        return this.$store.state.companies.locationList
      },
      listOfCompanys () {
        return this.$store.state.companies.companyList
      }
    }

Answer 1

做你正在做的事情的方式对我来说看起来很奇怪。尝试使用另一种方式。无论如何，你说你的问题是当用户重新进入页面时数据仍然存在。所以一种方式是：

在您的组件中，当用户离开页面时，请尝试清除数据。因此，您可以使用生命周期钩子beforeDestroy发送操作以清除相关公司的商店中的属性（如果我得到了问题好）

Answer 2

如何在加载时立即执行手表：

watch: {
    selectedLocation: {
        immediate: true,
        handler(val, oldval) {
            this.$store.dispatch(FETCH_LOCOMPANY_LIST, val)
        }
...

我认为这应该与初始加载相同（当用户第一次打开页面时）。

Answer 3

这个怎么样：

1）在公司列表的商店中创建一个“重置”变种：

mutation: {
 resetCompanies (state) {
  state.companies.companyList = [];
 }
}

2）在mounted（）函数上调用此变异：

mounted () {
 this.$store.commit('resetCompanies');
}

Answer 4

So i think i get it.You want to have a v-select and upon on this the table filled.

You said that the table filled with users.But the "users" are static or you are getting them from Database?

if you are getting from Database then:

  data: {
    select: '',
    selectItems: [1,2,3],
    dataTableItems: []
  },
  watch: {
   select() {
    //here make a request to backend like below
    axios.get('/users', {params: {select: this.select}})
    .then(response=> {
      //here fill the data-table
      this.dataTableItems = response.data.users
    })
   }

You dont have why to use vuex store.Also if you are filling the select from backend then in created hook fill the select items like:

created() {
  axios.get('locations')
   .then(response => {
    this.selectItems = response.data.locations
   })
}

当v-select为null时，如何从v-data-table解除绑定数据？

4 个答案: