VueJS v-for in laravel blade

Question

How can I create a list in laravel (v7) blade using the VueJS v-for method?

inside home.blade.php:

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

in the source code this results in:

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

but i would like to have number=0 or =1 on the first qm-item, number=2 on the second and so on.

UPDATE: the issue was how I was checking it, since the DOM is re-rendered I cannot check in the browser source code for this, because this won't be up to date.

Answer 1

You should bind the number as follows:

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

• Dominic: hm, in the source code with this I get: :number="index"
• Majed Badawi: What is the package name of qm-item?
• Dominic: Ah, sorry you were right, I checked the wrong way. Since this stuff is rendered dynamically I can't check in the brwoser source code, since that's not up to date then. So your solution works fine.

Answer 2

You need to bind number:

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

index will be defined on the Vue.js side, not on the Laravel side.

• Dominic: Ah, sorry you were right, I checked the wrong way. Since this stuff is rendered dynamically I can't check in the brwoser source code, since that's not up to date then. So your solution works fine.

Answer 3

When you pass data from blade to your Vue component you have to bind the props with a leading : So, in your case, it should be <qm-item :number="{{index}}"></qm-item> Also, use variable just like you normally do in the blade.