如何从axios调用到表单中的selectfield设置默认值

Question

我正在尝试使用 axios 在数据库值的 select 字段上设置默认值。这样，在页面 load/refresh 期间，该值来自数据库而不是空白值。我能够从方法中获取正确的值，但无法将其分配给 v-for.

中的 html select 字段

<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>

Answer 1

作为currentitemamount(item, index)return是1-10之间的一个整数，那么就可以简单地使用:

currentitemamount(item, index) 而不是 v-model 中的 selected[currentitemamount(item, index)] 并且您可以 return response.data.amount 而不是将其分配给 this.selected.

演示：

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>

Answer 2

不是 100% 清楚 shopping_cart_items_list 是如何初始化的，但是假设您有一个对象数组，以及一个为每个对象提供初始值的异步方法。

如您所愿进行标记（现在，在编辑之后）
data 需要一个包含 N 个值的数组，因为标记会生成 N select 个。（注意数据要初始化为函数）

    data: function () {  
      return {
        selected: [],
        shopping_cart_items_list: [] // presumed
      };
    },

要在页面加载时执行此操作，请使用 mounted 挂钩。初始化购物车（无论您是否能够做到），然后同时获取 select 值...

    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: { /* ... */ },

Answer 3

在花了很多时间尝试使用不同的答案之后，它实际上非常简单。在循环中分配 v-model="item.current_amount"。不需要任何方法。

<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>

如何从axios调用到表单中的selectfield设置默认值

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

vue.js

vue-component

vuejs3