I'm in the process of creating a dynamic form that allows users to add additional fields by simply clicking on a button labeled "adicionar condição." The concept is similar to what can be seen in the screenshot below: https://i.stack.imgur.com/Mpmr6.png
Each row within this form follows a structured data format, as shown here:
groups: [
{
connective: 'and',
conditions: [
{
type: 'lead_prop',
field: 'tags',
condition: 'has',
value: ''
}
]
}
]
By clicking the "adicionar condição" button, a new object is added to the conditions array, utilizing the following method:
<v-btn @click="addCondition(i)">Adicionar condição</v-btn>
addCondition(index) {
this.groups[index].conditions.push({
type: 'lead_prop',
field: 'tags',
condition: 'has',
value: ''
});
}
Incorporating Vuetify autocomplete poses a challenge with maintaining unique values. Whenever a new condition object is added to the group's conditions array, it seems like the v-model of the autocomplete component remains consistent. Altering the value of the newly added autocomplete also affects the previous ones, as illustrated here: https://i.stack.imgur.com/9a378.png
If there is a change in the "tags" field, all existing autocompletes receive the same value. This presents an issue with how the autocomplete model is bound:
<v-autocomplete
v-model="g.conditions[index].value"
:items="tags"
:teste="index"
:loading="isLoading"
:search-input.sync="search"
color="white"
hide-no-data
hide-selected
item-text="tag"
item-value="id"
label="Tags"
placeholder="Comece a digitar para procurar"
prepend-icon="mdi-tag"
return-object>
How can I ensure each tags autocomplete field is correctly linked to its respective object within the conditions array?
This is my current approach for iterating through the data:
<v-card v-for="(g, i) in groups" :key="i">
<v-row v-for="(c, index) in g.conditions" :key="index">