如何为动态对象定义v-model属性？

Question

我正在构建一个动态表单，允许用户通过单击按钮添加更多字段（“ adicionarcondição”）。类似于打印屏幕：

此表单的每一行均基于以下数据：

groups: [
  {
    connective: 'and',
    conditions: [
      {
        type: 'lead_prop',
        field: 'tags',
        condition: 'has',
        value: ''
      }
    ]
  }
]

当用户按下“ adicionarcondição”按钮时，新对象将被推至条件数组，如下所示：

<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: ''
      });
    }

如您所见，我正在使用vuetify自动完成功能，这就是问题所在。每当我将新的条件对象添加到组的conditions数组时，看起来自动完成组件的v模型都是相同的。如果更改新的自动完成功能的值，则前一个将获得相同的值，如下所示：

如果我更改“标签”字段，则所有现有的自动完成功能也会收到该值。这就是我绑定自动完成模型的方式：

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

如何将每个标签自动完成字段绑定到conditions数组中的对象？

这是我遍历数据的方式：

<v-card v-for="(g, i) in groups" :key="i">
<v-row v-for="(c, index) in g.conditions" :key="index">

Answer 1

解决这个问题的一种方法是创建一个内部有自动完成功能的轻量级组件 然后暴露属性来改变模型。