Vue: Getting a default value for v-select

Question

I have a list of cartItems and I'm generating a dropdown for each one. Each cartItem has a field called orig_quantity that I'm looking to set the default value of the drop down to. I tried doing :value="item.orig_quantity" but that doesn't seem to be doing it.

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>

Are you using Vuetify or the `vue-select` [component](https://sagalbot.github.io/vue-select/docs/Basics/Values.html#single)? Edit: either way - there is no need for a `v-for`, as the component will handle that for you. — Matt Oestreich, Apr 03 '19 at 19:44
@MattOestreich using `vue-select` ....the v-for is iterating the list of items and displaying the item name, item description and a `v-select` dropdown for the quantity of each item — RohimL, Apr 03 '19 at 20:01
RohimL - please see my answer below - uses pseudo code to update the `item.orig_quantity` ... hope this helps. — Matt Oestreich, Apr 03 '19 at 20:37
RohimL - I misunderstood your question - to make things easier could you supply an example of what one of these objects looks like? — Matt Oestreich, Apr 03 '19 at 22:22
Matt: no problem. cartItems is an array of `item` objects. For example: `cartItems = [ {product_name: "Chair", original_quantity: 1, price: "$19.99}, {product_name: "Couch", original_quantity: 1, price: "$29.99}]` . So i am iterating through the cartItems using v-for to display the name, price, and I'm wanting to make a dropdown with the number 1 to 10 that when it is changed, using `v-on:change`, fires a function called `updateQuantity($event, item)that takes the event value (from 1 to 10 in the dropdown), and makes a post to the update quantity endpoint using the new quantity and item id — RohimL, Apr 03 '19 at 22:42
continued: so the original_quantity field will be updated to that new value next time and my problem is that I want the dropdown to reflect that value as the default value next time a user comes back, which is why I want it read off of `item.original_quantity` since that will reflect the new value next time after the post is made to the endpoint — RohimL, Apr 03 '19 at 22:44
Glad I could help out! Sorry for the misunderstanding earlier.. Cheers!! — Matt Oestreich, Apr 04 '19 at 01:05

score 0 · Answer 1 · answered Apr 03 '19 at 19:21

0

You should be able to add a v-model attribute to the 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>

answered Apr 03 '19 at 19:21

Travis P

178
6

they'd all be sharing the same v-model then – RohimL Apr 03 '19 at 19:33
The v-model will be unique to each cart item in the loop.. see my codepen https://codepen.io/travispence/pen/OGMMKd – Travis P Apr 03 '19 at 19:59
right, but that doesn't persist on refresh. I want the default value to be the newly updated value I'm getting from the API , which is stored in `item.orig_quantity` – RohimL Apr 03 '19 at 20:05

Matt Oestreich · Accepted Answer · 2019-04-03T23:57:17.347

Sorry about that - I misunderstood your question at first.. I have updated my answer below.. This should be sufficient to get the idea across (the code stands to be cleaned - its 'pseudo' enough to get the idea across, though)..

In CodePen form, which I find easier to read:

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: Getting a default value for v-select

2 Answers2