获取第二个选择框的值以获取结果

Question

我正在尝试为我的项目获取嵌套 select 中的城市、县、地区。所以我有 3 层嵌套 selects。但是当我尝试使用 2 个变量获取数据时，我无法将 "first selected select" 的值传递给获取 url.

如何将第一个 selected select 的值传递给 fetch url？

我需要用值

替换this.MUSTBEVALUEOFTHESECONDSELECTEDSELECT

<script src="https://unpkg.com/vue"></script>

<script type="text/javascript">
  window.addEventListener('load', function() {


    var app = new Vue({
      el: '.app',
      name: "IlIlceUygulaması",
      data: {

        iller: {},
        ilceler: {},
        mahalleler: {},

        selected: 0,
        ilSecildi: false,
        ilceSecildi: false,



      },


      methods: {
        illeriGetir() {
          fetch("https://www.example.com/loc/")
            .then(result => result.json())
            .then(result => {
              this.iller = result;
            })
        },
        ilceleriGetir() {
          this.ilSecildi = true;
          fetch(`https://www.example.com/loc/${this.selected}`)
            .then(result => result.json())
            .then(result => {
              this.ilceler = result;
            })
        },
        mahalleleriGetir() {
          this.ilSecildi = true;
          this.ilceSecildi = true;

          fetch(`https://www.example.com/loc/${this.MUSTBEVALUEOFTHESECONDSELECTEDSELECT}/${this.selected}`)
            .then(result => result.json())
            .then(result => {
              this.mahalleler = result;
            })
        }
      }
    })
    app.illeriGetir();
  });

</script>


<div class="app" style="margin-top:50px">
  <b>İl Seçiniz</b>
  <select class="form-control col-md-3" v-model="selected" v-on:change="ilceleriGetir()">

                                    <option v-for="list in iller"
                                            v-bind:value="list.cityid">
                                        {{list.cityname}}
                                    </option>
                                </select>
  <div v-if="ilSecildi" style="margin-top:50px">
    <b> İlçe Seçiniz</b>
    <select class="form-control col-md-3" v-on:change="mahalleleriGetir()">
                                        <option v-for="list in ilceler"
                                                v-bind:value="list.countyid">
                                            {{list.countyname}}
                                        </option>
                                    </select>
  </div>

  <div v-if="ilceSecildi" style="margin-top:50px">
    <b> Mahalle Seçiniz</b>
    <select class="form-control col-md-3">
                                        <option v-for="list in mahalleler"
                                                v-bind:value="list.areaid">
                                            {{list.areaname}}
                                        </option>
                                    </select>
  </div>

</div>

Answer 1

创建一个新对象，每个 select 框都具有要变异的属性：

selections: {
    iller: null,
    ilceler: null,
    mahalleler: null
}

更新所有 v-model 绑定：

v-model="selections.iller"
v-model="selections.ilceler"
v-model="selections.mhalleler"

现在您可以正确获取它们了。

获取第二个选择框的值以获取结果

Getting the value of the second selectbox to fetch result

javascript

vue.js

fetch-api

vuejs2