autocomplete - 在 v-for 中使用自动完成

Question

我对 vuejs2 非常陌生，但我正在尝试使用它！

我使用 v-autocomplete 组件，我从这里下载：

https://github.com/paliari/v-autocomplete

组件在循环 v-for 中，我无法正确设置道具所有道具都反映在所有组件上，正确的方法是什么？

这里有一个图像来理解：

https://i.imgur.com/5C0jbXp.png

我的代码：

<template v-for="lote in remate.lotes">
   <v-autocomplete
       :items="items"
       :ref="'search'"
       :v-model="loteClienteForm.cliente"
       :get-label="getLabel"
       :keep-open="true"
       input-class="form-control"
       :component-item='UserAutocompleteTemplate'
       @update-items="updatedItems">
   </v-autocomplete>
</template>

我的Vue页面：

<script>
import axios from 'axios'
import Autocomplete from 'v-autocomplete'
import UserAutocompleteTemplate from '../components/template/UserAutocompleteTemplate'

export default {
    middleware: 'auth',
    scrollToTop: false,
    components: {
        'v-autocomplete': Autocomplete
    },
    data: () => ({
        items: [],
        item: {},
        loteClienteForm: new Form({}),
        UserAutocompleteTemplate: UserAutocompleteTemplate
    }),
    methods: {
        getLabel (item) {
            if(item !== null){
                return item.nombre
            }
        },
        updatedItems (text) {
            this.searchRemateClientes(text).then( (response) => {
                this.items = response;
            })
        },
        async searchRemateClientes(search){
            const { data } = await axios.get('/api/search/remate-clientes', {params: {query: search}});
            return data;
        }
    }
}

Answer 1

您的v-model示例中loteClienteForm.cliente的 不依赖于v-forfor lote，因此所有v-autocomplete组件都使用与其模型相同的值。

请注意，您还缺少组件中的key属性属性v-autocomplete。