Question

请查看我的代码，我不确定我做错了什么？我想在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>

Answer 1

这是我发现的解决方案。我花了30分钟才算出这个解决方案。

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>

最后显示数据！希望这也有帮助!!!

如何使用v-on：更改VueJS并发送参数以使用axios获取更新JSON数据

1 个答案: