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

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

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

如何“重置”v-data-table，使其在重新进入页面时不显示任何数据？我已使用computed属性将vuex存储绑定到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
      }
    }

{{props.item.customerid}
{{props.item.name}
从“../store/actions.type”导入{FETCH_LOCOMPANY_LIST、FETCH_LOCATION_LIST、REMOVE_COMPANY、ADD_NEW_COMPANY}
导出默认值{
名称：'公司'，
数据：（）=>({
selectedLocation:空，
}),
观察：{
selectedLocation:功能（val、oldval）{
此.$store.dispatch（获取本地公司列表，val）
}
},
挂载：函数（）{
此.$store.dispatch（获取位置列表）
if（this.selectedLocation==null | | this.selectedLocation==未定义）{
this.listOfCompanys=null
}
},
计算：{
位置列表（）{
返回此。$store.state.companys.locationList
},
公司名单（）{
返回此。$store.state.companys.companyList
}
}

加载后立即执行watch如何：

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

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

这是怎么回事：

1） 在商店中为公司列表创建“重置”变异：

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

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

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

---

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

在您的组件中，当用户离开页面时，请尝试清除数据。因此，请使用lifecycle hook：在那里，您可以发送一个操作来清除与公司相关的存储中的属性（如果我很好地理解了这个问题）

所以我想我明白了。你想要一个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存储。另外，如果您正在填充“从后端选择”，则在创建的钩子中填充“选择”项，如：

---

它对你挂载的钩子不起作用（你正在尝试解除绑定那里的数据吗？）？此外，你可以观看

$route

我尝试了这个，但我不能这样做，因为计算的道具没有getter。不确定我是否应该将存储列表绑定到属性，并将其设置为null？挂载：函数（）{this.$store.dispatch（FETCH_LOCATION_LIST）如果（this.selectedLocation==null | | this.selectedLocation==undefined）{this.listOfCompanys=null}，那么如果您需要专门用于此组件的公司列表，那么最好为其创建新的数据变量（因此，如果您在其他地方需要该数据，就不会对存储进行变异——假设这就是您首先使用vuex的原因）。您可以分派默认值，它应该可以工作，但不确定您的用例是什么样子，因此可能会出现问题…这里的问题是，我的V-select没有默认值，因此我无法在页面加载中使用该值来加载公司。我真正需要的是“清除”v-data-table使用的列表，因此在选择公司之前不会显示任何内容。可能我对此的理解是错误的，因为将v-data-table绑定到vuex存储可能是这样的。也许我应该跳过vuex，直接在组件中使用axios？@klasmack默认值为null afaics:

selectedLocation:null，

。那么我认为它可能会起作用。无论如何，如果你想跨多个组件重用过滤器，那么我认为vuex是正确的选择。但是如果你不想重用过滤器，那么我建议采用不同的方法。但是，我不知道你的用例看起来如何，所以我想这取决于你。

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