Vue: получение значения по умолчанию для v-select - PullRequest
Новая
       78

Vue: получение значения по умолчанию для v-select

0 голосов
/ 03 апреля 2019

У меня есть список 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>

Ответы [ 2 ]

0 голосов
/ 03 апреля 2019

Извините за это - я сначала неправильно понял ваш вопрос .. Я обновил свой ответ ниже .. Этого должно быть достаточно, чтобы донести идею (код должен быть очищен - его «псевдо» достаточно, чтобы донести идеюхотя) ..

В 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>
0 голосов
/ 03 апреля 2019

Вы должны иметь возможность добавить атрибут 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>
...