Vue.js v-for loop in laravel blade template

Question

I'm unable to bind index and values when using v-for... however when I echo array it works...

blade file content:

<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>

so this index is unable to get parsed and my members object is empty with fields "name, surname, email, phone"

NOTE that if I use @{{ members }} it will work, but when I want to use @{{ member }} or @{{ index }} that will not work, any ideas why is this happening?

an error that I'm getting is:

app.js:6103 [Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in Root)

data object app.js file

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: ''});
},

working CODE, only blade file changed to this

<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>

still not sure why #1 not working and #2 does... any ideas?

Jon Awoyele Jon Awoyele · Accepted Answer · 2018-09-26T16:53:37

Try <tr class="single-member" v-for='member in members' :key='member.id' >

this will refer to member.id remember members will have to be an array of member

vue-list key

Vue.js v-for loop in laravel blade template

1 Answers