Question

我有一个嵌套的选择选项表单，可以在更改时从API获取数据。它对我来说很完美。

演示

但是，我还将在编辑表单中使用它。因此，我必须以从数据库中获取的形式填充选择选项值（我可以将这3个值用作json结果以供提取）。

我以某种方式解决了这个问题。

<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,
        selected2: 0,

        ilSecildi: true,
        ilceSecildi: true,
      },


      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.selected}/${this.selected2}`)
            .then(result => result.json())
            .then(result => {
              this.mahalleler = result;
            })
        }
      }
    })
    app.illeriGetir();
  });

</script>


<div class="app">
  <div class="row">
    <div class="col-md-4 mb-3">
      <label for="country">İl</label>
      <select class="custom-select d-block w-100" id="country" required="" v-model="selected" v-on:change="ilceleriGetir()" name="city_id">
                                                    <option v-for="list in iller"
                                                            v-bind:value="list.cityid">
                                                        {{list.cityname}}
                                                    </option>
                                                </select>
      <div class="invalid-feedback">
        Please select a valid country.
      </div>
    </div>
    <div class="col-md-4 mb-3" v-if="ilSecildi">
      <label for="state">İlçe</label>
      <select class="custom-select d-block w-100" id="country" required="" v-on:change="mahalleleriGetir()" v-model="selected2" name="county_id">
                                                    <option v-for="list in ilceler"
                                                            v-bind:value="list.countyid">
                                                        {{list.countyname}}
                                                    </option>
                                                </select>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-4 mb-3" v-if="ilceSecildi">
      <label for="zip">Mahalle</label>
      <select class="custom-select d-block w-100" id="country" required="" ame="area_id">
                                                    <option v-for="list in mahalleler"
                                                            v-bind:value="list.areaid">
                                                        {{list.areaname}}
                                                    </option>
                                                </select>
      <div class="invalid-feedback">
        Zip code required.
      </div>
    </div>
  </div>
</div>

Answer 1

这解决了问题

  beforeMount: function() {
    fetch("https://www.example.com/loc/instant")
      .then(result => result.json())
      .then(result => {
       this.result=result;

        this.selected = this.result[0].cityid,

        this.ilceleriGetir();
        this.selected2 = this.result[0].countyid

      })
  },

如何用数据库中的值依次填充嵌套选择选项

1 个答案: