如何在VueJS中使用v-on:change并发送参数以使用axios获取更新JSON数据
Posted
技术标签:
【中文标题】如何在VueJS中使用v-on:change并发送参数以使用axios获取更新JSON数据【英文标题】：How to use v-on:change in VueJS and send the parameter to get update JSON data with axios 【发布时间】：2018-01-30 05:09:42 【问题描述】：请查看我的代码，我不确定我做错了什么？ 我想在 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>【问题讨论】：
你需要在onChange函数中添加var self = this。 你又帮我了。谢谢 【参考方案1】：试试这个：
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/vue@2.4.2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html>希望对您有所帮助！
【讨论】：
谢谢，但是云请您从代码中删除我的域。 你确定！我在这里发布答案后立即删除，不用担心兄弟！以上是关于如何在VueJS中使用v-on:change并发送参数以使用axios获取更新JSON数据的主要内容，如果未能解决你的问题，请参考以下文章
VueJS：如何在多页面应用程序中使用路由来发送 url 查询参数？