Как передать массив из контроллера в vue.js v-for? - PullRequest
Новая
       6

Как передать массив из контроллера в vue.js v-for?

2 голосов
/ 03 ноября 2019

Я пытаюсь это передать от контроллера значения (из столбца базы данных), к компоненту vue.js (для выбора опции в v-for), но когда я отправляю с контроллера на блейд и получаю как проп в vue.js и помещаюв качестве данных я получаю каждый символ в json как одну опцию выбора.

Как я могу исправить это для правильной работы и для помещения объекта json в v-for select?

RolesController. php 

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

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

И в блейде я передаю значение компоненту vue: 

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

My UsersAdd.vue : 

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

Но я получаю каждый символ в списке от json в списке выбора вместо того, чтобы получать каждое имя роли в каждой строке выбора. Например я получаю: 

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

Вместо 

moderator

1 Ответ

2 голосов
/ 04 ноября 2019

Предполагая, что в вашем RoleController есть функция, похожая на следующую: 

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

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

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

В вашем users.create шаблоне блейда вы хотите иметь следующее: 

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

Обратите внимание на двоеточие (:) перед roles prop.

Тогда в вашем UserAdd vue компоненте, что-то вроде следующего должно работать для вас: 

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