如何将数组从控制器传递给vue.js v-for？

bakero 发表于 Dev

面包师傅

我正在尝试从控制器传递值（从数据库列）到vue.js组件（用于v-for中的select选项），但是当我从控制器发送到刀片并在vue.js中作为prop获取并放入数据时，我将json中的每个字符作为一个选择选项。

我如何解决该问题以使其正常工作并将json对象放入v-for select中？

RolesController.php

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

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

在刀片中，我将值传递给vue组件：

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

我的UsersAdd.vue：

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

但是我从select中的json获取列表中的每个字符，而不是在每个select行中获取每个角色名称。例如我得到：

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

代替

moderator

退磁

假设您的函数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>

注意冒号（:)在rolesprop之前。

然后，在您的UserAddvue组件中，应执行以下操作：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。