使用来自 Vue 和 Axios 中的 API 的数据填充选择标签

Question

我想用来自 api get 请求的数据填充 _选择标签_。这是我的 html 代码

<div id="app">
    <label for="country" class="control-label">Country</label>
    <select v-model="selectedCountry" @change="onChangeCountry" name="country" id="country" class="form-control" tabindex="11">
        <option selected disabled value="">Please select one</option>
        @foreach($countries as $country)
            <option value="{{ $country->id }}">{{ $country->name }}</option>
        @endforeach
    </select>
    <label for="city" class="control-label">City</label>
    <select v-model="cities" name="city" id="city" class="form-control" tabindex="12">
        <option v-bind:value="city.id">@{{ city.name }}</option>
    </select>
</div>

现在我的 JavaScript 代码：

 <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        selectedCountry: '',
        cities: []
      },
      methods: {
          onChangeCountry: function (event) {
            axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
            .then(function (
                this.cities = response.data
            }).catch(function(error) {
                console.log('an error occured ' + error);
            });
          }
        }
    });
</script>

我很确定数据已收到，因为我做了很多 console.log 但我不知道如何将收到的数据附加到我的第二个选择标签，也不知道如何继续。

原文由 Wajdi Makhlouf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我终于让它工作了

我只需要在数据函数中创建一个城市变量

在选择中我不需要将它绑定到城市数组[]，城市变量很好 v-model=“city”

原文由 Wajdi Makhlouf 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在选择中试试这个

<select v-model="selectedCity" name="city" id="city" class="form-control" tabindex="12">

   <option v-for="(city,cityIndex) in cities" :key="city.id" :value="city.id">{{ city.name }}</option>

</select>

将’selectedCity’添加到数据对象，然后通过this.selectedCity访问它的值

这是在 vue 文档中

https://v2.vuejs.org/v2/guide/list.html

https://v2.vuejs.org/v2/guide/forms.html#Select

原文由 Sérgio Reis 发布，翻译遵循 CC BY-SA 4.0 许可协议