Question

我想用来自api get请求的数据填充 select tag 。这是我的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，但我不知道如何将收到的数据附加到我的第二个选择标签，也不知道如何继续。

Answer 1

在选择

中尝试此操作

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

添加“已选城市”＆＃39;到数据对象，然后通过this.selectedCity

访问它的值

这是在vue docs

中

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

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

Answer 2

您需要使用v-for来循环城市并创建选项元素：

<select name="city" id="city" class="form-control" tabindex="12">
    <option v-for="(city, index) in cities" 
            :key="index" 
            :value="city.id">@{{ city.name }}
    </option>
</select>

另外，将data属性更改为函数，以便它被动反应：

 data () {
    return {
      selectedCountry: '',
      cities: []
    }
 }

Answer 3

我终于让它工作了我只需要在数据功能中创建一个城市变量在选择中我不需要将它绑定到城市数组[]，城市变量很好 v-model =＆＃34; city＆＃34;

Answer 4

<select v-model="country" class="form-control">
   <option disabled value="" selected="selected">Please select one</option>
   <option v-for="country in countries" :key="country.id" v-bind:value="country.id">
           {{country.name}}
     </option>

</select>
<script>
export default {
    data() {
        return {
            countries: {},
            country:''
    } 
</script>

使用Vue和Axios中的API数据填充select标记

4 个答案: