Vue triggering axios on every dropdown selection made

Question

Vue triggering axios on every dropdown selection made

I have a Vue template that currently calls a method (axios call) upon page load, which works well. However, I would like to modify it so that whenever I select an option from the dropdown menu, it will re-call the axios method with the selected option. Specifically, I am looking for a way to pass the selected value of 1, 2, or 3 into the fetchItems method as data = {value} and trigger the axios call based on that selection:

<div class="form-group col-lg-3">
    <label>Choose Item Type</label>
    <select class="form-control" v-model="itemTypes" id="itemTypes">
        <option v-for="itemTypeOption in itemTypeOptions" v-bind:value="itemTypeOption.value">{{ itemTypeOption.name }}</option>
    </select>
</div>

export default {
  data() {
    return {
      itemTypes: [],
      itemTypeOptions: [
        {value: 1, name: "A"},
        {value: 2, name: "B"},
        {value: 3, name: "All"}
      ]
    }
  },
  created() {
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      axios.get('/report/items/data')
      .then(response => {        
        this.rows = response.data
      })
    }
  }
}

javascript vue.js

Answer 1

Answer №1

To achieve this, you can utilize the @change event in your Vue.js template:


    <template>
    <div class="form-group col-lg-3">
        <label>Select Item Type</label>
        <select class="form-control"
                v-model="selectedItemType"
                id="itemTypes"
                @change="handleSelection">
            <option v-for="typeOption in itemOptions"
                    v-bind:value="typeOption.value">{{ typeOption.name }}</option>
        </select>
    </div>

</template>
<script>
export default {
    data() {
        return {
          selectedItemType: {},
          itemOptions: [
            {value:1, name:"Option A"},
            {value:2, name:"Option B"},
            {value:3, name:"All Options"}
          ]
        }
      },
      created() {
        this.fetchData();
      },
      methods: {
        fetchData(value = '') {
          axios.get('/data/items', {params: {info: value}})
          .then(response => {        
            this.items = response.data
          })
        },
        handleSelection() {
            this.fetchData(selectedItemType.value);
        }
      }
    }
</script>

Answer 2

To achieve this, you can utilize the @change event in your Vue.js template:


    <template>
    <div class="form-group col-lg-3">
        <label>Select Item Type</label>
        <select class="form-control"
                v-model="selectedItemType"
                id="itemTypes"
                @change="handleSelection">
            <option v-for="typeOption in itemOptions"
                    v-bind:value="typeOption.value">{{ typeOption.name }}</option>
        </select>
    </div>

</template>
<script>
export default {
    data() {
        return {
          selectedItemType: {},
          itemOptions: [
            {value:1, name:"Option A"},
            {value:2, name:"Option B"},
            {value:3, name:"All Options"}
          ]
        }
      },
      created() {
        this.fetchData();
      },
      methods: {
        fetchData(value = '') {
          axios.get('/data/items', {params: {info: value}})
          .then(response => {        
            this.items = response.data
          })
        },
        handleSelection() {
            this.fetchData(selectedItemType.value);
        }
      }
    }
</script>

Answer 3

Answer №2

One of the various methods to achieve this is by including @input="someMethod()" or @change="someMethod()" in your select element. Additionally, you can utilize $event.target.value to access the value directly.

<select class="form-control" v-model="itemTypes" id="itemTypes">
  <option v-for="itemTypeOption in itemTypeOptions" v-bind:value="itemTypeOption.value" @input="fetchItems($event.target.value)">{{ itemTypeOption.name }}</option>
</select>

Here's an example for the fetchItems function:

fetchItems(val = '') {
  axios.get('/report/items/' + val)
  .then(response => {        
    this.rows = response.data
  })
}

Answer 4

One of the various methods to achieve this is by including @input="someMethod()" or @change="someMethod()" in your select element. Additionally, you can utilize $event.target.value to access the value directly.

<select class="form-control" v-model="itemTypes" id="itemTypes">
  <option v-for="itemTypeOption in itemTypeOptions" v-bind:value="itemTypeOption.value" @input="fetchItems($event.target.value)">{{ itemTypeOption.name }}</option>
</select>

Here's an example for the fetchItems function:

fetchItems(val = '') {
  axios.get('/report/items/' + val)
  .then(response => {        
    this.rows = response.data
  })
}

Vue triggering axios on every dropdown selection made

Answer №1

Answer №2

Similar questions

Retrieve the value with `eventArgs.get_value()` function to obtain the selected text instead of the ID

Issues with React Router functionality on a live production site are causing complications

Validating the similarity of classes with JQuery

What are the steps to create a project template in WebStorm by saving an existing project?

The challenge with linking within Layerslider

Hide the .prev button on the jQuery slider when it is on the first

Managing Actions in React-Redux: Understanding the Dispatch Function

Replacing npm package dependency

unable to successfully npm install canvas

Exploring an array of objects to find a specific string similar to the one being

The THREE.js WebGLRenderer canvas captures the 'click' mouse event

How can I show the post JSON response that was retrieved in ReactJS on the same form component that was used to submit the value?

Maximizing the efficiency of rendering components in Ember JS

Clicking on the ajax tab control in asp.net displays a single rectangular box - how can this be removed?

assigned to a variable and accessed in a different route

Is there a way to selectively display only the first 100 lines using console.log()?

Using jQuery, you can utilize the $.when() function with both a single deferred object and an

Error: Module specifier "react-router-dom" could not be resolved. Relative references should start with either "/", "./", or "../"

Choosing items while using the Orthographic camera in Three Js

Developing a versatile tool to eliminate duplicate items from arrays in JavaScript