laravel 刀片中的 VueJS v-for答案

【问题标题】：VueJS v-for in laravel bladelaravel 刀片中的 VueJS v-for
【发布时间】：2020-05-06 10:07:32
【问题描述】：

如何使用 VueJS v-for 方法在 laravel (v7) Blade 中创建列表？

在 home.blade.php 内：

<template v-for="(item,index) in this.list">
    <qm-item number="@{{index}}"></qm-item>
</template>

在源代码中会导致：

<qm-item number="index"></qm-item>

但我想在第一个 qm-item 上设置 number=0 或 =1，在第二个上设置 number=2，依此类推。

更新：问题在于我是如何检查它的，因为 DOM 是重新渲染的，所以我无法检查浏览器源代码，因为它不会是最新的。

【问题讨论】：

【解决方案1】：

你应该bind这个号码如下：

<qm-item :number="index"></qm-item>

【讨论】：

【解决方案2】：

你需要绑定number:

<template v-for="(item,index) in this.list">
    <qm-item :number="index"></qm-item>
</template>

index 将在 Vue.js 端定义，而不是在 Laravel 端。

【讨论】：

【解决方案3】：

当您将数据从刀片传递到您的 Vue 组件时，您必须使用前导 : 绑定道具所以，在你的情况下，它应该是<qm-item :number="{{index}}"></qm-item> 另外，像在刀片中一样使用变量。

【讨论】：