如何在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如何在VueJS中使用v-on:change并发送参数以使用axios获取更新JSON数据
【发布时间】：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。
你又帮我了。谢谢

标签： json vue.js axios

【解决方案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>

希望对您有所帮助！

【讨论】：

谢谢，但是云请您从代码中删除我的域。
你确定！我在这里发布答案后立即删除，不用担心兄弟！