Question

我正在尝试通过控制器传递值（从数据库列），到vue.js组件（用于v-for中的select选项），但是当我从控制器发送到刀片并在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>

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

Answer 1

假设您的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道具前的冒号（：）。

然后在您的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>

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

1 个答案: