Vue.js 如何使vuetify自动完成组件相互独立

我正在用vuetify开发一个发票应用程序。当我为一行选择一个产品时，我遇到了一个问题。它填充其他行。**如何使每个自动完成组件彼此独立 **

这是自动完成组件

这是因为每个项目共享相同的数据。在这里，您迭代字段列表，每个字段都得到v-model=product，并且这个产品数据变量应用于所有字段。解决方案是为每个字段创建一个存储区，在该存储区中，仅为该特定字段保存和更新模型。这可以通过以下方式完成：

为每个字段和dataModel保存its模型的一个属性创建一个对象数组：

  data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    fields: [{
      dataModel: ['foo', 'bar']
    }, {
      dataModel: ['foo', 'bar']
    }],
  }),

然后在模板中为每个v-autocomplete使用item.dataModel：

实例：

  data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    fields: [{
      dataModel: ['foo', 'bar']
    }, {
      dataModel: ['foo', 'bar']
    }],
  }),

<v-app id="inspire">
    <v-card>
      <v-container fluid>
        <v-row
          align="center"
        >
          <v-col cols="12" v-for="item in fields">
            <v-autocomplete
              v-model="item.dataModel"
              :items="items"
              outlined
              dense
              chips
              small-chips
              label="Outlined"
              multiple
            ></v-autocomplete>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>