[Vuejs]-Vue default value dynamic select options

by

1👍

✅

You should add:

<option value="0"> 0 </option>

Before your v-for loop on options, so it would look like this:

<select v-model="selectedTickets[product.id]">
  <option value="0"> 0 </option>
  <option
    v-for="(maximum, n) in Number(product.product_meta.maximum)"
    :value="maximum"
    :key="n"
  >
    {{ maximum }}
  </option>
</select>

Now, that first option would be the default one, and user would be able to go back anytime.

One other thing that you can do is just to add +1 to product.product_meta.maximum and use n for :value instead of maximum.

The best option, though, would be to create one method called getSelectableOptions(product) that will return the array of selectable options for given product, for example [0, 1, 2, 3, 4, 5] and then you can loop through it, that way your code will be cleaner.

Hope this helps!

👤Ben

0👍

You can add a clear button at the bottom to reset all the selection

<button @click="selectedTickets={}">Reset</button>

It is also possible to implement individual clear buttons for each select input like the following:

<select v-model="selectedTickets[product.id]">
    <option
        v-for="(maximum, n) in Number(product.product_meta.maximum)"
        :value="maximum"
        :key="n"
    >
        {{ maximum }}
    </option>
</select>
<button
    @click="resetSelection(product.id)"
    v-if="product.id in selectedTickets"
>
    Clear
</button>

Then create a method in the methods section

resetSelection: function(productId) {
   delete this.selectedTickets[productId];
}

This will clear individual selects.

👤Rijosh

Leave a comment