어레이를 컨트롤러에서 vue.js v-for로 전달하는 방법

어레이를 컨트롤러에서 vue.js v-for로 전달하는 방법

컨트롤러 패스 값(데이터베이스 열)에서 vue.js 컴포넌트(v-for의 선택 옵션용)로 시도하고 있지만 컨트롤러에서 블레이드로 전송하여 vue.js에서 프로포트로 가져와 데이터로 넣으면 json의 모든 문자가 하나의 선택 옵션으로 표시됩니다.

이 문제를 해결하고 json 개체를 v-for select에 넣으려면 어떻게 해야 합니까?

역할 컨트롤러php

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

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

블레이드에서는 vue 컴포넌트에 값을 전달합니다.

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

My Users Add.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

에 기능이 있다고 가정합니다.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>

언급URL : https://stackoverflow.com/questions/58684313/how-to-pass-array-from-controller-to-vue-js-v-for