laravel 刀片模板中的 Vue.js v-for 循环答案

【问题标题】：Vue.js v-for loop in laravel blade templatelaravel 刀片模板中的 Vue.js v-for 循环
【发布时间】：2019-03-02 10:50:08
【问题描述】：

使用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 警告]：属性或方法“索引”未在实例，但在渲染期间引用。确保该属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。看： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

（在根目录中找到）

数据对象 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 确实...有什么想法吗？

【问题讨论】：

请提供您的数据对象？
@boussadjrabrahim 添加了

标签： laravel-5 vue.js laravel-blade

【解决方案1】：

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

这将引用 member.id 记住成员必须是成员数组

vue-list key

【讨论】：

我没有 ID，而且我的错误应该是索引而不是键...现在将编辑它

【解决方案2】：

你可以关注这个。它对我有用

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

【讨论】：