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

Posted 2023-02-22

【中文标题】laravel 刀片模板中的 Vue.js v-for 循环

【英文标题】：Vue.js v-for loop in laravel blade template

【发布时间】：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 添加了

【参考方案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>