Vue：获取 v-select 的默认值

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 属性添加到 select。

<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

很抱歉 - 我一开始误解了你的问题。我已经在下面更新了我的答案。这应该足以让这个想法得到理解（代码有待清理 - 它 'pseudo' 足以不过，请理解这个想法)..

采用 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: ".99"
      },
      {
        product_name: "Couch",
        original_quantity: 3,
        total_quantity: 6,
        pending_quantity: null,
        price: ".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 的默认值

Vue: Getting a default value for v-select

vue.js

vue-component

vuejs2

v-select