CODEWITHSUNDEEP
jsonvue.jsaxios
xDevelopers
xDevelopers

Reputation: 105

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

Please see my code that I'am not sure what I'm doing wrong?. I want to get new JSON data when the id="select1" has changed and then send the parameter to id="select2" and then id="select2" will be show data in option.

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>

Upvotes: 2

Views: 30024

Answers (1)

Meet Zaveri
Meet Zaveri

Reputation: 3059

Try this:

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/[email protected]"></script>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html>

enter image description here

Hope this helps you!

Upvotes: 5

Related Questions