Question

我正在尝试为我的项目选择嵌套的城市，县或地区。所以我有3个级别的嵌套选择。但是，当我尝试使用2个变量获取数据时，无法将“ first selected select”的值传递给获取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

制作一个具有每个要更改的选择框属性的新对象：

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

更新所有v-model绑定：

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

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

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

1 个答案: