[Vuejs]-How to recreate vuejs composant with ajax data on specific event

by

0👍

✅

It depends. If you have the tag/category in the instanciation of the component then yeah, you can make the call in the created lifecycle.

export default {
  data: () => ({
    options: []
  }),
  methods: {
    async getOptions(){
       const response = await axios.get('/items');

       this.options = response.data
    }
  }
}

If you don’t have the tags in the creation of the component and need to change when the user selects a category you can do the ajax call when the user changes the options:

<template>
  <select v-model="optionSelected" @change="getOptions">
    <option value="1">First Value</option>
    <option value="2">Second Value</option>
  </select>
</template>

<script>

export default {
  data: () => ({
    optionSelected: null,
    options: [],
  }),
  methods: {
     async getOptions(item) {
        const response = await axios.get('/items', { params: { filter: item } });
        
        this.options = response.data;
     }
  }
}

</script>

Edit after OP updated question

When you have an input, every time the user inputs something the browser emits an event called input. When you have a select element, the browser emits an event called change. In this case since you are using an input we should be using @input and not @change

<input type="hidden" name="my_variable" v-model="myVar" @input="foo">

You can read more about it here

Besides that when you listen to an input event the first parameter of the function will be the value passed:

async foo(value) {
        console.log(value, this.myVar);
    }

Leave a comment