How can I unbind data from a v-data-table when a v-select is null?

Question

I have a v-data-table that gets its data from a vuex-store. The data thats displayed is controlled by a v-select on the same page. So when a user selects a company in the v-select the v-data-tables data gets updated with users.

My problem is that when a user selects a company in the v-select and then goes to another page, upon reentering the page the data is still there, but the v-select does not have any company selected, so the view is out of sync.

How can I "reset" the v-data-table to not show any data upon reentering the page? I have bound my vuex-store to the v-data-table with a computed property, so I cannot set it to null. Any ideas

<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

The way of doing what you are doing it looks strange to me.Try to use another way.Anyway,you said that your problem is that when the user reentering the page the data is still there.So one way would be:

In your component,when the user leave the page, try clear the data.So use lifecycle hook: beforeDestroy there you can dispatch an action to clear the property in store that is related companies (if i get the question well)

Answer 2

How about executing watch immediately on load:

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

I think this should be same as initial load (when user opens the page for the first time).

Answer 3

What about this:

1) Create a 'reset' mutation in the store for the company list:

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

2) Call this mutation on the mounted () function:

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