Two way data flow on Vue component

Viewed 356

I want a selector in a Vue component to update when the stored value in Vuex is updated. Here is a simplified version of the vue component:

<template>
    <v-autocomplete
      outlined
      dense
      v-model="team"
      label="Select Team"
      :items="teams"
      item-text="name"
      item-value="_id"
      return-object
      class="mx-3 mt-3"
      @change="selectTeam"
    ></v-autocomplete>
</template>

The JS:

<script>
export default {
  name: 'NavDrawer',
  data() {
    return {
      team: null,
      teams: [],
    };
  },
  async created() {
    this.team = this.$store.getters['teams/allTeams'].find(
      (t) => t.name === this.$route.params.team,
    );
    this.teams = this.$store.getters['teams/allTeams'];
  },
  methods: {
    async selectTeam() {
      if (this.team) {
        await this.$store.dispatch('editTeam/selectTeam', this.team);
        this.$router.push(`/team/${this.team.name}`);
      } else {
        this.$router.push('/');
      }
    },
  },
};
</script>

And the Vuex store:

export default {
  namespaced: true,
  state: () => ({
    editedTeam: {},
  }),
  mutations: {
    selectTeam(state, team) {
      state.editedTeam = team;
    },
    resetTeam(state) {
      state.editedTeam = {};
    },
  },
  actions: {
    selectTeam({ commit }, team) {
      commit('selectTeam', team);
    },
    resetTeam({ commit }) {
      commit('resetTeam');
    },
  },
  getters: {
    getSelectedTeam: (state) => state.editedTeam,
  },
};

I'm not sure if it matters, but this vuex store is passed into an index file to create the Vuex.Store -- this is working correctly and is not the issue.

I want the team stored in editedTeam to reactively update the team selected in the v-autocomplete component, when a new editedTeam is selected elsewhere in the application. I want the v-autocomplete selector to send a new team to editedTeam when it is selected. I think I should be using mapState for this and storing them as a computed value -- but nothing I've tried has worked. I find the vuex documentation to be lacking in good examples.

Thanks!

0 Answers
Related