如何使vuetify的自动完成组件相互独立？

Posted 2021-04-25

我正在用vuetify开发一个发票应用程序，我遇到了一个问题，当我选择一行的产品时，它会填充其他行。

这是自动完成的组件

 <tr v-for="(stock_item, index) in form.stock_items" :key="stock_item.data">
                        <td class="pb-n12">{{index+1}}</td>
                        <td class="pt-4" @click="getIndex(index)">
                            <v-autocomplete
                                v-model="product"
                                :items="GET_PRODUCTS"
                                item-text="description"
                                item-value="id"
                                :return-object="true"
                                background-color="#fefeff"
                                label="Select Product"
                                full-width
                                dense
                                solo

                                hint="list of all products"
                            >
                            </v-autocomplete>
                        </td>

答案

发生这种情况是因为每个 <v-autocomplete/> 项目共享 <v-model>. 这里，你正在迭代字段列表，每个字段都会得到 v-model="product" 而这 product 数据变量适用于所有的字段。解决办法是为每个字段创建一个存储空间，模型将只为该特定字段保存和更新。可以用这种方法来完成。

为每个字段创建一个对象数组，并创建一个属性 (dataModel)持有其模型。

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

然后在模板中使用 item.dataModel 对于每个 v-autocomplete:

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

实例。https:/codepen.ionyankovpenPoZzegV?editors=1010。