Vue default value dynamic select options - vue.js

Question

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
};
}

Answer 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!

Answer 2

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.