Как отображать вложенные данные в v-select из VUEX Store

Question

У меня есть 2 раскрывающихся списка v-select (страны и государства), которые заполняются данными из базы данных. Например, я пытаюсь выбрать страну (КАНАДА) из первого раскрывающегося списка v-select, и я хочу, чтобы второй v-select отображал только состояния КАНАДЫ. Я использую VUEX STORE для получения данных из моего Laravel backend API.

// VUEX STORE
import Axios from "axios";

export default {
namespaced: true,

//*******STATE*******//
state: {
   countries: [],
   states: []
},

//*********MUTATIONS**********//
SET_COUNTRIES(state, countries) {
  state.countries = countries;
},

SET_STATE(state, states) {
  state.states = states;
}
//********ACTIONS******//
actions: {
  async loadCountries({ commit }) {
    let response = await Axios.get("/dashboard/countries");
    let countries = response.data;
    countries.forEach(c => {
      c.state_ids = c.states.map(p => p.id);
    });
    console.log(response.data);
    commit("SET_COUNTRIES", countries);
  },

  async loadStates({ commit }) {
    let response = await Axios.get("/dashboard/states");
    let states = response.data;
    console.log(response.data);
    commit("SET_STATE", states);
  }
 }
};

 // CountryState.vue

<v-row>
      <v-col cols="4">
        <v-select
          v-model="selectedCountry"
          :items="countries"
          item-value="name"
          item-text="name"
          :label="$t('GENERAL.FORM.COUNTRY')"
          single-line
          return-object
        >
        </v-select>
      </v-col>
      <v-col cols="4">
        <v-select
          v-model="selectedState"
          :items="states"
          item-value="name"
          item-text="name"
          :label="$t('GENERAL.FORM.STATE')"
          single-line
          return-object
        >
        </v-select>
      </v-col>
      <v-col cols="4">
      <p>The selected Item is: {{ selectedCountry.name }}</p>
      <p>The selected Item is: {{ selectedState.name }}</p>
    </v-row>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      selectedCountry: [],
      selectedState: "",
      showScheduleForm: false
    };
  },

  computed: {
    ...mapState({
      countries: state => state.allCountries.countries,
      states: state => state.allCountries.states
    })
  },

  mounted() {
    this.$store.dispatch("allCountries/loadCountries");
    this.$store.dispatch("allCountries/loadStates");
  }
};
</script>

Данные страны в состоянии выглядят так

{"id":1,"name":"Canada","short_code":"CA","states":[{"id":7,"name":"Ontario","country_id":1},{"id":8,"name":"Minnetoba","country_id":1},{"id":9,"name":"Columbia","country_id":1}],"state_ids":[7,8,9]}

Состояния Данные в состоянии выглядят следующим образом

{"id":7,"name":"Ontario","country_id":1,"country":{"id":1,"name":"Canada","short_code":"CA"}}

Answer 1

Вы можете запустить функцию для фильтрации состояний onChange. Затем ваш v-select отображает список состояний в зависимости от выбранной страны.

Шаг 1: добавьте метод фильтрации

  methods: {
    filterStates(country) {
      this.selectedState = "";
      this.filteredStates = this.states.filter(state => state.country_id === country.id);
    }
  },

Шаг 2: триггер onСмена страны

@change="filterStates"

Шаг 3: отображение отфильтрованных состояний

 :items="filteredStates"

Объединение

<v-row>
      <v-col cols="4">
        <v-select
          v-model="selectedCountry"
          :items="countries"
          item-value="name"
          item-text="name"
          :label="$t('GENERAL.FORM.COUNTRY')"
          single-line
          return-object
          @change="filterStates"
        >
        </v-select>
      </v-col>
      <v-col cols="4">
        <v-select
          v-model="selectedState"
          :items="filteredStates"
          item-value="name"
          item-text="name"
          :label="$t('GENERAL.FORM.STATE')"
          single-line
          return-object
        >
        </v-select>
      </v-col>
      <v-col cols="4">
      <p>The selected Item is: {{ selectedCountry.name }}</p>
      <p>The selected Item is: {{ selectedState.name }}</p>
    </v-row>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      selectedCountry: [],
      selectedState: "",
      showScheduleForm: false,
      filteredStates: []
    };
  },

  computed: {
    ...mapState({
      countries: state => state.allCountries.countries,
      states: state => state.allCountries.states
    })
  },
  methods: {
    filterStates(country) {
      this.selectedState = "";
      this.filteredStates = this.states.filter(state => state.country_id === country.id);
    }
  },
  mounted() {
    this.$store.dispatch("allCountries/loadCountries");
    this.$store.dispatch("allCountries/loadStates");
  }
};
</script>