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

Issue

I am newbie in vuejs. I want to reload component items according to another choice. Example: I want to reload posts list according to tag/category user selected. How can I do it? where do I need to put a new ajax call? Also ajax call is different from tags to categories. I think add ajax call in created method like simple component loaded on page loading will not help. How to do this? thanks

<template>
  <div>
    <div class="pt-2 pb-3">
        <input type="hidden" name="my_variable" v-model="myVar" @change="foo">
    </div>
  </div>
  </template>

<script>
export default {
  data() {
    return {
      myVar: null,
    };
  },
  methods: {
    submit: function(e) {},
    async foo() {
        console.log('foo', this.myVar);
    }
  }
};
</script>

Solution

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);
    }

Answered By - Bruno Francisco

Answer Checked By - Gilberto Lyons (PHPFixing Admin)