Как изменить выбор на основе другого выбора в vue?

Question

У меня есть методы в Web Api, который загружает первый выбор и загружает второй выбор, но у второго есть параметр, который передает его из первого выбора.

URL для второго выглядит следующим образом:http://localhost:58209/api/Tecnico/Tanque/?estacionid=@parameter

ОК.Я использую Vuetify в переднем конце, и чтобы попытаться загрузить второй v-select, я использую это:

<v-flex xs12 sm8 md6>
   <v-select autocomplete :items="itemsEstacion" item-text="numeroEstacion" item-value="estacionID" prepend-icon="local_gas_station" :loading="loading" label="Seleccionar Destino" v-model="selectEstacion"></v-select>
</v-flex>

   <v-flex xs12 sm8 md6>
     <v-select autocomplete :items="itemsTanque" v-model="selectTanque" item-text="NumTanque" item-value="ID" v-on:change="cargarTanques(itemsEstacion.estacionID)" prepend-icon="opacity" label="Seleccionar Tanque"></v-select>
   </v-flex>

В data() return{} у меня есть:

  selectEstacion: "",
  selectTanque: null,
  itemsEstacion: [],
  itemsTanque: [],

Это мои методы: - Для первого выберите

    cargarEstaciones() {
  this.loading = true;
  axios
    .get("GetEstaciones", {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token")
      }
    })
    .then(response => {
      this.loading = false;
      console.log(response);
      this.itemsEstacion = response.data;
      //this.snackbar = true;
      //this.textSnackbar = "Se han cargado correctamente las estaciones";
    })
    .catch(error => {
      this.loading = false;
      if (error.response.status != null) {
        switch (error.response.status) {
          case 204:
            this.snackbar = true;
            this.textSnackbar = error.response.data;
            break;
        }
      }
    });
},

- Для второго выберите:

    cargarTanques(estacionID) {
  axios
    .get("Tecnico/Tanque/?estacionID=" + estacionID, {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token")
      }
    })
    .then(response => {
      console.log(response);
      this.itemsTanque = response.data;
    })
    .catch(error => {
      if (error.response.status != null) {
        switch (error.response.status) {
          case 404:
            this.snackbar = true;
            this.textSnackbar = error.response.data;
            break;
          case 500:
            this.snackbar = true;
            this.textSnackbar = error.response.data;
        }
      }
    });
},

И чтобы обработать событие, я поместил это на watch:{}

    selectEstacion: function() {
  this.cargarTanques(this.itemsEstacion.estacionID);
}

Но параметр не определен, всегда.И v-on: изменить это не работает, поэтому я использую watch () вместо этого.

Спасибо

Answer 1

itemsEstacion - это массив, поэтому itemsEstacion.estacionID всегда неопределен.

Я изменил ваш код, переместите v-on:change="cargarTanques" для первого выбора.

<v-flex xs12 sm8 md6>
    <v-select 
        autocomplete 
        :items="itemsEstacion" 
        item-text="numeroEstacion" 
        item-value="estacionID" 
        prepend-icon="local_gas_station" 
        :loading="loading" 
        label="Seleccionar Destino" 
        v-on:change="cargarTanques"
        v-model="selectEstacion">
    </v-select>
</v-flex>

<v-flex xs12 sm8 md6>
    <v-select 
        autocomplete 
        :items="itemsTanque" 
        v-model="selectTanque" 
        item-text="NumTanque" 
        item-value="ID" 
        prepend-icon="opacity" 
        label="Seleccionar Tanque">
    </v-select>
</v-flex>

cargarTanques() {
  axios
    .get("Tecnico/Tanque/?estacionID=" + this.itemsEstacion.estacionID, {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token")
      }
    })
    .then(response => {
      console.log(response);
      this.itemsTanque = response.data;
    })
    .catch(error => {
      if (error.response.status != null) {
        switch (error.response.status) {
          case 404:
            this.snackbar = true;
            this.textSnackbar = error.response.data;
            break;
          case 500:
            this.snackbar = true;
            this.textSnackbar = error.response.data;
        }
      }
    });
}