Question

我有一个cartItems列表，并且正在为每个列表生成一个下拉列表。每个cartItem都有一个名为orig_quantity的字段，我希望将下拉列表的默认值设置为该字段。我尝试做:value="item.orig_quantity"，但这似乎没做。

computed: {
     quantityOptions: function() {
         return [1,2,3]
     }

}

<div v-for="(item, index) in cartItems" 
    <div>{item.product_name}</div>
   <v-select :options="quantityOptions"
             v-on:change="updateQuantity($event,item)">             
    </v-select>
</div>

Answer 1

您应该能够向选择项添加v-model属性。

<div v-for="(item, index) in cartItems" 
   <v-select v-model="item.orig_quantity" :options="quantityOptions"
             v-on:change="updateQuantity($event,item)">             
    </v-select>
</div>

Answer 2

抱歉，我一开始误解了您的问题。.我在下面更新了我的答案。.这应该足以使想法理解（代码将被清除-它的“伪”足以使想法得以理解，但）。

采用CodePen格式，我觉得它更易于阅读：

https://codepen.io/oze4/pen/vMLggE

Vue.component("v-select", VueSelect.VueSelect);

new Vue({
  el: "#app",
  data: {
    cartItems: [{
        product_name: "Chair",
        original_quantity: 7,
        total_quantity: 9,
        pending_quantity: null,
        price: "$19.99"
      },
      {
        product_name: "Couch",
        original_quantity: 3,
        total_quantity: 6,
        pending_quantity: null,
        price: "$29.99"
      }
    ],
  },
  methods: {
    getStock(cartItem) {
      let ci = this.cartItems.find(i => {
        return i.product_name === cartItem.product_name;
      });
      return [...Array(ci.total_quantity + 1).keys()].slice(1);
    },
    updateQty(cartItem) {
      alert("this is where you would post");
      let ci = this.cartItems.find(i => {
        return i.product_name === cartItem.product_name;
      });
      ci.original_quantity = ci.pending_quantity;
    }
  }
});

h5,
h3 {
  margin: 0px 0px 0px 0px;
}

.reminder {
  color: red;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select@2.6.4/dist/vue-select.js"></script>
<div id="app">
  <h4>Cart Items:</h4>
  <div v-for="(item, index) in cartItems">
    <h3>{{ item.product_name }}</h3>
    <h5>Price: {{ item.price }} | InBasket: {{ item.original_quantity }}</h5>
    <small>Change Quantity: </small>
    <v-select :value="item.original_quantity" :options="getStock(item)" @change="item.pending_quantity = $event"></v-select>
    <button @click="updateQty(item)" type="button">Update {{ item.product_name }} Qty</button><small class="reminder">*update after changing quantity</small>
    <br/>
    <hr/>
  </div>
</div>

Vue：获取v-select的默认值

2 个答案: