When working inside a Vue-component, I encounter a scenario where I need to create a list with a variable number of entries.
For example, it could look like this:
<form>
<input type="number" value="15" />
<input type="number" value="10" />
<input type="number" value="5" />
<input name="total" :value="summedTotal" /> <!-- (calculated dynamically) -->
</form>
Or it could be something like this:
<form>
<input type="number" value="15" />
<input type="number" value="10" />
<input type="number" value="5" />
<input type="number" value="17" />
<input type="number" value="20" />
<input name="total" :value="summedTotal" /> <!-- (calculated dynamically) -->
</form>
If the number of input fields was fixed, I could have easily solved it using v-model. However, since the number of 'models' is dynamic, I'm seeking a solution that still allows me to use v-model.
Currently, my workaround involves adding an @keypress event, locating the specific input element (document.getElementById('....')), and extracting the value from it. But I need to introduce a delay for this to function properly. While I could opt for using keyup or another event watcher, this approach feels quite makeshift and non-ideal.
The actual code represents an advanced version of this:
<form>
<input
type="number"
v-for="(entry, index) in list"
name="entry.id"
value="entry.initial_value"
:id="'entry-id__' + entry.id" @keypress="calculateSum()"
/>
<input name="total" :value="summedTotal" /> <!-- (calculated dynamically) -->
</form>