1

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.

Improve this question

3 Answers 3

Reset to default
1

You should bind the number as follows:

<qm-item :number="index"></qm-item>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

hm, in the source code with this I get: :number="index"
What is the package name of qm-item?
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.
1

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.

Improve this answer

1 Comment

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

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.