javascript - 如何根据vue中的另一个选择更改选择？

Question

我在 Web Api 中有加载第一个选择并加载第二个选择的方法，但第二个有一个从第一个选择传递它的参数。

第二个的网址如下所示：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:change 它不起作用，所以我使用 watch() 代替。

谢谢

标签： javascriptvue.jsdrop-down-menuvuetify.js

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