'how to set default value from axios call to selectfield in a form

I am trying to set a default value on a select field from a database value using axios. That way during a page load/refresh the value is from the database and not a blank value. I am able to get the correct value from the method but can't assign it to the html select field that is in a v-for.

<template>
  <div v-for="(item, index) in shopping_cart_items_list">
    <select
      @change="itemamount($event, item)"
        v-model="selected[currentitemamount(item, index)]"
        :key="item.id"
    >
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
</template>

<script>
  data() {
    return { selected: "" };
  },
  methods: {
    currentitemamount(item, index) {
      axios({
        method: "get",
        url: "/checkout/currentquantity/" + item.id,
        headers: authHeader(),
      }).then((response) => {
        this.selected = response.data.amount;
        console.log(this.selected)
      });
    },
},
</script>
vue.jsvue-componentvuejs3


Solution 1:[1]

After spending much time trying to use different answers it was actually pretty simple. In the loop assign v-model="item.current_amount". No method was needed.

<template>
  <div v-for="(item, index) in shopping_cart_items_list">
    <select
      @change="itemamount($event, item)"
        v-model="item.current_amount"
        :key="item.id"
    >
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
</template>

<script>
  data() {},
  methods: {
    
    },
},
</script>

Solution 2:[2]

As currentitemamount(item, index) returns an integer between 1-10, Then you can simply use :

currentitemamount(item, index) instead of selected[currentitemamount(item, index)] in v-model and you can return response.data.amount instead of assigning it to this.selected.

Demo :

var vm = new Vue({
  el:"#app",
  data:{
    shopping_cart_items_list: ['item1']
  },
  methods: {
    currentitemamount(item, index) {
      // axios call
            return 2; // response.data.amount
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, index) in shopping_cart_items_list" :key="index">
    <select @change="itemamount($event, item)"
        v-model="currentitemamount(item, index)">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
</div>

Solution 3:[3]

Not 100% clear about how shopping_cart_items_list is initialized, but say you have an array of objects, and an async method that provides an initial value for each object.

  1. Markup as you have it (now, after the edit)
  2. data needs an array of N values, since the markup produces N selects. (note that data should be initialized to a function)
    data: function () {  
      return {
        selected: [],
        shopping_cart_items_list: [] // presumed
      };
    },
  1. To have this work on a page load, use the mounted hook. Init the shopping cart (however you've been able to do it), then get the select values concurrently...
    data: function() { /*see above*/ },
    async mounted() {
      this.shopping_cart_items_list = await this.whateverIDoToInitCartItems();
      const promises = this.shopping_cart_items_list.map((item, index) => {
        return currentitemamount(item, index);
      });
      // the punchline: get all of the (plural) amounts and assign to the array
      this.selected = await Promise.all(promises);
    },
    methods: { /* ... */ },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anekdotin
Solution 2 Rohìt Jíndal
Solution 3 danh

Related Questions