当 v-select 为空时，如何从 v-data-table 取消绑定数据？答案

【问题标题】：How can I unbind data from a v-data-table when a v-select is null?当 v-select 为空时，如何从 v-data-table 取消绑定数据？
【发布时间】：2018-08-17 21:54:59
【问题描述】：

我有一个从 vuex 存储中获取数据的 v-data-table。显示的数据由同一页面上的 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
      }
    }

【问题讨论】：

它不适用于您的挂载钩子（您是否试图解除绑定那里的数据？）？另外，您可以观看$route
我试过这个，但我不能这样做，因为计算的道具没有吸气剂。不确定我是否应该将商店列表绑定到属性并将其设置为空？挂载：function () { this.$store.dispatch(FETCH_LOCATION_LIST) if (this.selectedLocation === null || this.selectedLocation === undefined) { this.listOfCompanys = null } },
好吧，如果您需要专门针对该组件的公司列表，那么最好为此创建新的数据变量（因此，如果您在其他地方需要该数据，则不要改变商店 - 假设这就是原因您首先使用的是vuex）。您可以调度默认值，它应该可以工作，但不确定您的用例是什么样的，所以它可能会破坏某些东西......

标签： javascript vue.js vuejs2 vuex vuetify.js

【解决方案1】：

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

在您的组件中，当用户离开页面时，请尝试清除数据。因此使用生命周期挂钩：beforeDestroy 在那里您可以发送一个操作来清除相关公司的商店中的属性（如果我很好地理解了问题)

【讨论】：

【解决方案2】：

加载时立即执行 watch 怎么样：

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

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

【讨论】：

这里的问题是我的 V-select 没有默认值，所以我不能在页面加载时使用它来加载公司。我真正需要的是“清除” v-data-table 使用的列表，以便在选择公司之前不显示任何内容。也许我对此有错误的看法，因为将 v-datatable 绑定到 vuex-store 可能以这种方式工作。也许我应该跳过vuex，直接在组件中使用axios？
@klasmack 默认为空 afaics：selectedLocation: null,。所以我认为它可能会起作用。无论如何，如果你想跨多个组件重用过滤器，那么我认为 vuex 是正确的选择。但如果您不想重用过滤器，那么我建议采用不同的方法。但同样，我不知道您的用例看起来如何，所以我想这取决于您。

【解决方案3】：

这个呢：

1) 在商店中为公司列表创建一个“重置”突变：

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

2) 在mounted()函数上调用这个突变：

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

【讨论】：

【解决方案4】：

所以我想我明白了。你想要一个 v-select，然后在这个表格上填满。

您说表中充满了用户。但是“用户”是静态的，或者您是从数据库中获取的？

如果你是从数据库中获取的，那么：

  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
    })
   }

你不知道为什么要使用 vuex 商店。另外，如果你从后端填充选择，那么在创建的钩子中填充选择项，例如：

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

【讨论】：