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!

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.

I’ve tried my best to keep the following code as concise as possible.

The goal of this code: get tickets (products) via an api (data.json in this example) and display them in a table for users to buy.

The part I’m struggling with? Each product has a number which represents the maximum amount that can be bought per user. I’m showing these values dynamically in options, which works. To give you a better understanding, here is the code:

https://codesandbox.io/s/headless-currying-gocrw?fontsize=14&hidenavigation=1&theme=dark

Everything works as expected and wanted, but what truly would be great is to add a leading zero to the option numbers. Now when a user selects some tickets and changes his mind he won’t be able to do so.

EDIT:

If you look at the code via URL above, it is indeed now fixed (thanks to the +1 solution and using the index as my values). Now I’d like to have 0 selected as the default value. I’m not really sure on how to achieve this.

The for-loop looks like this:

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

Data function looks like this:

data() {
        return {
          selectedTickets: {},
          products: null
        };
      }