如何在VueJS中使用v-on：change并发送参数以使用axios获取更新的JSON数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45808740/
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
How to use v-on:change in VueJS and send the parameter to get update JSON data with axios
提问by xDevelopers
Please see my code that I'am not sure what I'm doing wrong?. I want to get new JSON data when the id="select1" has changed and then send the parameter to id="select2" and then id="select2" will be show data in option.
请查看我的代码，我不确定我做错了什么？。我想在 id="select1" 更改时获取新的 JSON 数据，然后将参数发送到 id="select2" 然后 id="select2" 将在选项中显示数据。
var appZone = new Vue({
el: '#el',
data() {
return {
options: [],
list:[],
selected:''
}
},
mounted() {
var self = this
axios.get('/wp-json/tour-api/v1/search/0')
.then(function (response) {
console.log(response);
self.options = response.data;
})
.catch(function (error) {
console.log(error);
});
},
methods: {
onChange: function (){
axios.get('/wp-json/tour-api/v1/search/'+this.selected)
.then(function (response) {
//console.log(response);
self.list = response.data;
console.log(list)
})
.catch(function (error) {
console.log(error);
});
}
}
})<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="el">
<select id="select1" v-model="selected" class="custom-select" v-on:change="onChange" >
<option v-for="item in options" v-bind:value="item.id" >
{{ item.title }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<select id="select2" class="custom-select" >
<option v-for="data in list" v-bind:value="data.country_id">{{ data.title }}</option>
</select>
</div>回答by Meet Zaveri
Try this:
尝试这个：
var appZone = new Vue({
el: '#el',
data() {
return {
options: [],
list:[],
selected:''
}
},
mounted() {
var self = this
axios.get('/wp-json/tour-api/v1/search/0')
.then(function (response) {
console.log(response);
self.options = response.data;
})
.catch(function (error) {
console.log(error);
});
},
methods: {
onChange: function (){
var self = this
console.log(self.list);
axios.get('/wp-json/tour-api/v1/search/0'+this.selected)
.then(function (response) {
//console.log(response);
self.list = response.data;
console.log('before list');
console.log(self.list);
console.log('after list');
})
.catch(function (error) {
console.log(error);
});
}
}
})<html>
<head>
<title>sjai</title>
</head>
<body>
<div id="el">
<select id="select1" v-model="selected" class="custom-select" v-on:change="onChange" >
<option v-for="item in options" v-bind:value="item.id" >
{{ item.title }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<select id="select2" class="custom-select" >
<option v-for="data in list" v-bind:value="data.country_id">{{ data.title }}</option>
</select>
</div>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Hope this helps you!
希望这对你有帮助！
