laravel 使用 Vue 和 Axios 中的 API 数据填充选择标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49066475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate select tag with data from API in Vue and Axios
提问by Wajdi Makhlouf
I want to populate select tagwith data from api get request. Here is my html code
我想用来自 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>
And now my JavaScript code:
现在我的 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>
I'm pretty sure that the data is received because i did a lot of console.log but I don't know how to append the received data to my second select tag nor how to proceed.
我很确定收到了数据，因为我做了很多 console.log，但我不知道如何将接收到的数据附加到我的第二个选择标签，也不知道如何继续。
采纳答案by Wajdi Makhlouf
I finally got it working
i just needed to create a city variable in data function
and in select i don't need to bind it to array of cities[], the city variable is fine v-model="city"
我终于让它工作了
我只需要在数据函数中创建一个城市变量
，在选择中我不需要将它绑定到城市数组[]，城市变量很好v-model="city"
回答by Sérgio Reis
Try this in the select
在选择中试试这个
<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>
Add 'selectedCity' to the data object and then access its value through this.selectedCity
将 'selectedCity' 添加到数据对象中，然后通过 this.selectedCity 访问其值
This is in the vue docs
这是在 vue 文档中
https://vuejs.org/v2/guide/list.html
https://vuejs.org/v2/guide/list.html
回答by Sérgio Reis
You need to use v-forto loop the cities and create the option elements:
您需要使用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>
Also, change your dataproperty into a function so it's reactive:
此外，将您的data属性更改为一个函数，使其具有反应性：
data () {
return {
selectedCountry: '',
cities: []
}
}
回答by Pianistprogrammer
<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>
