Question

2020-05-06

830

laravel vue.js

如何使用 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 已重新渲染，我无法在浏览器源代码中检查它，因为它不是最新的。

Answer 1

您应按如下方式 绑定 号码：

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

Majed Badawi

2020-05-06

Answer 2

您需要绑定 number ：

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

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

Answer 3

当您将数据从 blade 传递到 Vue 组件时，您必须使用前导 : 绑定 props 因此，在您的情况下，它应该是 <qm-item :number="{{index}}"></qm-item> 此外，使用变量就像您通常在 blade 中做的那样。