如何在 VueJS 中使用 v-on:change 并发送参数以使用 axios 获取更新 JSON 数据

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

试试这个：

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 数据

How to use v-on:change in VueJS and send the parameter to get update JSON data with axios

json

vue.js

axios