Question

我正在使用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>

Answer 1

之所以会这样，是因为每个<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.io/nyankov/pen/PoZzegV?editors=1010

如何使vuetify自动完成组件彼此独立

1 个答案: