Vue.js петля v-for в шаблоне лезвия

Question

Я не могу привязать индекс и значения при использовании v-for ... однако, когда я отображаю массив, он работает ...

содержимое файла блейда:

<tr class="single-member" v-for='(member, index) in members' :index='index' >
        @{{ index }}
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="First name*" >
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="Last name*" >
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="email" placeholder="Email*" >
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="number" placeholder="Phone">
            </div>
        </div>
    </tr>

такэтот index не может быть проанализирован, и мой член-элемент пуст с полями "name, surname, email, phone"

Обратите внимание, что если я использую @{{ members }}, это будет работать, но когда я хочу использовать @{{ member }} или @{{ index }} это не сработает, есть идеи, почему это происходит?

я получаю сообщение об ошибке:

app.js: 6103 [Vue warn]: свойство или метод«index» не определен в экземпляре, но на него ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.См .: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(находится в Root)

файл данных app.js файл

data: function() {
    return {
        gdprChecked: false,
        level: 'beginner',
        teamName: '',
        members: [],
        formError: false,
        formErrorMessage: '',
        formSuccess: false,
        formSuccessMessage: '',
    }
},
mounted() {
    // must be minimum 1 user
    this.members.push({firstName: '', lastName: '', email: '', phone: ''});
},

рабочий КОД, только файл блейда изменен на этот

<div class="columns" v-for="(member, index) in members">
    <div class="column is-narrow">
        @{{ index + 1 }}
    </div>
    <div class="column">
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="{{trans('hackathon.firstName')}}" v-model="member.firstName">
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="{{trans('hackathon.email')}}"  v-model="member.email">
            </div>
        </div>
    </div>
    <div class="column">
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="{{trans('hackathon.lastName')}}"  v-model="member.lastName">
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="{{trans('hackathon.phone')}}"  v-model="member.phone">
            </div>
        </div>
    </div>
</div>

до сих пор не уверен, почему # 1 не работает, а № 2 ... есть идеи?

Answer 1

Попробуйте <tr class="single-member" v-for='member in members' :key='member.id' >

это будет относиться к member.id Помните, что члены должны быть массивом членов

ключ списка vue