通过vuejs中另一个的值从一个选择中获取数据答案

【问题标题】：Get data from a select through the value of another in vuejs通过vuejs中另一个的值从一个选择中获取数据
【发布时间】：2021-05-03 23:11:51
【问题描述】：

我想通过select状态提供的信息来显示select city的值。选择城市需要在状态被选中后加载。

export default {
  data() {
    return {
      loading: false,
      inscription: new InscriptionModel(),
      successful: false,
      message: '',
      arrProfiles: [],
      arrStatus: [],
      states: [],
      cities: [],
    };
  },
  async mounted() {
    this.states = await this.listStates();
  },
  methods: {
    async listStates() {
      const response = await api.post('graphql', {
        query: `
          query{
            listStates{ data { id, name, uf } }
          }
        `,
      });
      if (Helpers.hasProperty(response.data, 'errors')) {
        Helpers.getValidateException(response.data);
        return;
      }
      return response.data.data.listStates.data;
    },
    async listCities() {
      const response = await api.post('graphql', {
        query: `
          query{
            listCities(condition: {state_id: ${this.inscription.state}})
            { data { id, name } }
          }
        `,
      });
    }
  }
}

<div class="col-sm-12 col-md-6 col-lg-3 col-xl-3">
  <div class="form-group">
    <label for="state_id">State</label>
    <select name="state" id="state_id" class="custom-select" @change="listCities()" v-model="inscription.state">
      <option v-for="state in states" v-bind:value="state.id" :key="state.id">
        {{ state.name }}
      </option>
    </select>
  </div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3 col-xl-3">
  <div class="form-group">
    <label for="city_id">Citie</label>
    <select id="citie" v-model="inscription.cities" class="custom-select">
      <option v-for="citie in cities" v-bind:value="citie.id" :key="citie.id">
        {{ citie.name }}
      </option>
    </select>
  </div>
</div>

代码通过 graphql api 带来数据，并正确显示状态，但不显示城市。城市字段的选择值不足。

【问题讨论】：

标签： javascript vue.js vuejs2 graphql vue-component

【解决方案1】：

首先，在包含城市选择的<div> 上使用v-if，以避免在没有城市数据时渲染它。这将防止来自未定义状态的任何错误：

<div v-if="cities.length" ...>
  ...
  <select id="citie">
  ...
  </select>
  ...
</div>

在检索城市数据时，您还没有将其设置为cities：

async listCities() {
  const response = await api.post('graphql', {
    query: `
      query{
        listCities(condition: {state_id: ${this.inscription.state}})
        { data { id, name } }
      }
    `
  });
  this.cities = response.data.data.listCities.data; // ✅ Add this
}

【讨论】：