How to pass array from controller to vue.js v-for?

Question

I am trying that from controller pass values (from database column), to vue.js component (for select option in v-for), but when I send from controller to blade and get as prop in vue.js and put as data, I get every character in json as one select option.

How I can fix that to work properly and to put json object in v-for select?

RolesController.php

$roles = Roles::all('name');

        return view('users.create', ['users' => $users]);

And in the blade I pass value to vue component:

<users-add
roles="{{$roles}}"
></users-add>

My UsersAdd.vue:

<select>
  <option v-for="role in roles" :value="role">
     {{role}}
  </option>
</select>

But I get every character in the list from json in the select, instead to get every role name in every select row. For example I get:

{
"
n
a
m
e
"
:
"
m
o
d
e
r
a
t
o
r
"

Instead

moderator

Did you try passing an array? It seems to be parsing an object. — Rolf
– Rolf, Commented Nov 3, 2019 at 20:35
I was looking again at your code: it's parsing a string. What's the output of <body>{{ $roles }}</body>? — Rolf
– Rolf, Commented Nov 3, 2019 at 21:03

Peppermintology · Accepted Answer · 2019-11-03 21:12:14Z

4

Assuming you have a function in your RoleController that looks similar to the following:

public function index()
{
    $roles = Role::all('name');

    $users = User:all(); // or however you're obtaining your users

    return view('users.create', compact('roles', 'users'));
}

In your users.create blade template, you want to have the following:

<users-add :roles="{{ $roles }}"></users-add>

Note the colon (:) before the roles prop.

Then in your UserAdd vue component, something like the following should work for you:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <label for="role">Role</label>
                <select id="role" name="role">
                  <option v-for="role in this.roles" :value="role">
                     {{ role.name }}
                  </option>
                </select>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [
            'roles'
        ]
    }
</script>

answered Nov 3, 2019 at 21:12

Peppermintology

10.4k4 gold badges34 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bakero Over a year ago

Thank you very much, it works ! I forgot colon (:) in the blade.

Peppermintology Over a year ago

@bakero - Glad I could help. [:

Collectives™ on Stack Overflow

How to pass array from controller to vue.js v-for?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related