请查看我的代码，我不确定我做错了什么？。 我想在 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>最佳答案
试试这个:
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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0472716144362a302a36" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html> 
希望这对您有帮助!
关于json - 如何使用v-on :change in VueJS and send the parameter to get update JSON data with axios，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45808740/