Получение значения второго окна выбора для получения результата - PullRequest
Новая
       6

Получение значения второго окна выбора для получения результата

0 голосов
/ 30 октября 2018

Я пытаюсь выбрать город, округ, район во вложенном списке для моего проекта. Итак, у меня есть 3 уровня вложенных выборок. Но когда я пытаюсь получить данные с двумя переменными, я не могу передать значение «первый выбранный выбор» в URL для выбора.

Как передать значение первого выбранного значения выбора в URL-адрес выборки?

Мне нужно заменить this.MUSTBEVALUEOFTHESECONDSELECTEDSELECT значением

Вот демо http://jsfiddle.net/krsj3ecy/

<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>

1 Ответ

0 голосов
/ 30 октября 2018

Создайте новый объект, который имеет свойства для каждого поля выбора, чтобы изменить: 

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

Обновите все ваши v-model привязки: 

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

Теперь вы можете получить их правильно.

...