在 v-for 中使用自动完成

Question

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

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

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

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

看图看懂：

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，它不依赖于 lote 的 v-for，因此所有 v-autocomplete 组件都使用与他们的模型相同的值。

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

在 v-for 中使用自动完成

use autocomplete in v-for

autocomplete

vuejs2

v-for