在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-for lote，因此所有v-autocomplete组件都使用相同的值作为他们的模特。

请注意，您还错过了v-autocomplete组件中的key属性。