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

【问题标题】：How to define v-model property to a dynamically object?如何将 v-model 属性定义为动态对象？
【发布时间】：2020-01-05 01:28:04
【问题描述】：

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

此表单的每一行都基于此数据：

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

当用户按下“adicionar condiçã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 自动完成功能，这就是问题所在。每次我向组的条件数组中添加一个新的条件对象时，看起来自动完成组件的 v-model 是相同的。如果我更改新自动完成的值，前一个会得到相同的值，如下所示：

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

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

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

这就是我迭代数据的方式：

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

【问题讨论】：

能否包含定义g 和index 的代码？看起来您可能没有正确循环 conditions。
@skirtle 我现在就做这个
改用v-model="c.value"。我会尽可能避免在模板中通过索引引用数组元素
所有自动完成功能不断将其值更改为与所选@Phil 相同
有趣的是，这只发生在自动完成输入上。图中能看到的“contém”和“Não contém”保持着自己的价值。

标签： javascript vue.js vuetify.js v-model

【解决方案1】：

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

【讨论】：