Encountering a problem with Vue-JS involving v-for loops and v-model properties.
I have an array of items:
<input
v-for="i in list"
v-model="i.model"
... (other tags that use i)
>
</input>
Accompanied by some JavaScript:
let model_thing = ref();
let list = [
{ model: ref(), data: "Whatever things" }
{ model: model_thing, data: "..." }, //Tried placing the reference variable outside the list as well
]
The issue lies in the fact that the v-model isn't functioning properly, likely due to the reference variable being within an array.
A potential solution involves creating a dummy variable inside the v-for loop:
<input
v-for="i in list"
v-model="let dummy = ref(); /* use 'dummy' as the ref"
... (whatever else)
>
</input>
Utilizing Maz-UI, an undocumented UI framework, complicates finding a quick fix, like using select dropdowns instead of inputs:
<!-- Using select dropdowns instead -->
<MazSelect
v-for="i in list"
:value="i.model"
@input="i.model = $event.target.value"
>
</MazSelect>
Unfortunately, this results in displaying [object, Object] and placeholder text still appearing.
Looking for guidance on how to create such dummy variables?