Vue.js v-for loop in laravel blade template - laravel-5

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://v2.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?

Answer 1

you can follow this. it's worked for me
<tr v-for="(item,item_index) in purchase_items" :key="item_index">
td>#{{ item_index+1 }}</td>
<td>#{{ itemProduct(item.product_id) }}</td>
td>#{{ itemUnit(item.unit_id) }}</td>
<td>#{{ item.price }} * #{{ item.qty }}</td>
<td>#{{ item.amount }} </td>
<td>
<button v-on:click="removeItem(`#{{ item_index }}`)" class="btn
btn-danger btn-sm" > <i class="fa fa-trash-alt fa-1x"></i> </button>
</td>
</tr>

Answer 2

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