Laravel 블레이드의 Vue 구성 요소 인스턴스에 PHP 변수를 전달하는 방법은 무엇입니까?

Laravel 블레이드의 Vue 구성 요소 인스턴스에 PHP 변수를 전달하는 방법은 무엇입니까?

Laravel 블레이드 파일의 Vue 컴포넌트에 PHP 변수 값을 전달하려면 어떻게 해야 합니까?

예에서는 client-details가 이는 client-details에서 .Laravel 이번에는 하겠습니다.id url 과 which which which which which 。/client/1 나 my my myVue★★★★★★ 。

Laravel 의은 다음과 같습니다.

<client-details inline-template>
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

탑재자:

Vue.component('client-details', {
    data(){
        return {
            clientId: null
        }
    },
);

나는 이미 시도했다.

:clientId="{{ $client->id }"

하지만 효과가 없다.

를 사용해야 .props마크업을 통해 Vue의 컴포넌트에 속성을 전달할 수 있습니다.이치노

<client-details inline-template client-id="{{ $client->id }}">
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

Vue 컴포넌트:

Vue.component('client-details', {
    props: [
        {
            name: 'clientId',
            default:0,
        }
    ]
});

컴포넌트의이 값에 수 .this.clientId

이슈 상세

HTML에서는 속성 이름을 kebab-case로 쓰지만, Vue에서는 camel-case로 씁니다.공식 문서에 더 많은 정보가 있습니다.

의 「Vue」를 .v-bind입니다.:clientId="{{ $client->id }}", 는 JavaScript 안에 것을 하므로, 그 할 수 .따라서 이 경우에도 오류가 발생할 수 있습니다.이 해야 합니다.clientId="{{ $client->id }}결장 없이요

방금 했는데 잘 되고 있어요.Larabel 5.4 및 Vue 2.x 사용.

내 구성 요소에서 개체의 속성(프로프)을 선언합니다.

props: ['currentUser'],

구성 요소가 인스턴스화된 블레이드 페이지에서 다음을 수행합니다.

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

컴포넌트에서는 ""를 "camel Case"에 .currentUser단, html은 대소문자를 구분하지 않기 때문에 kebab-case(current-user)를 사용해야 합니다.

블레이드 구문을 .{{ }} 사이의 는 php를 됩니다.htmlspecialchars되지 않은 데이터를 사용하는 는, 을 사용합니다.{!! !!}

이 스레드를 발견했는데도 여전히 오류가 발생하는 사용자에게는 위의 Mustafa Ehsan이 정답을 제시하지만 설명하지는 않습니다.시행착오가 그걸 보는 데 도움이 됐어요.

newuser.blade의 내 컴포넌트.php

<access-request
       firstname="{{ $newuser->firstname }}"
       lastname="{{ $newuser->lastname }}"
       accessid="{{ $newuser->id }}"
>
</access-request>

사용되는 바인딩 방법에 주목하는 것이 매우 중요합니다.위 컴포넌트에는 데이터 바인딩 이름(React 소품 등)만 기재하고 컴포넌트 소품(아래 참조)에 등록했습니다.무스타파는 이렇게 답변에 그의 구속을 적었고, 잘 작동합니다.다른 하나는 v-bind: 또는 :를 사용하는 Vue 방법이지만 반드시 큰따옴표와 작은따옴표를 사용해야 합니다.

:firstname="'{{ $newuser->firstname }}'"

따옴표가 둘 다 없으면 Vue 경고가 표시됩니다.

Access Request(액세스 요구).vue:

<template>
   <div class="component">
        <h3 class="">{{ firstname }} {{ lastname }}</h3>
        <p>Access ID: {{ accessid }}</p>
        <label for="administrator">Grant Administrator Priviledges:</label>
        <input name="administrator" type="checkbox" value="True" class="mb-5"><br>
        <button type="submit" class="btn btn-success">Add</button>
        <button type="submit" class="btn btn-danger">Delete</button>
        <hr>
   </div>
</template>

<script>
  export default {
    name: "AccessRequest",
    props: ['firstname', 'lastname', 'accessid'],
  }
</script>

일부 서버 데이터를 Vue 컴포넌트에 전달해야 했습니다.그 결과 Vue 컴포넌트는$server_data변수를 json 스크립트 태그로 전달합니다.

컨트롤러 내:

$server_data = json_encode([
    "some-data" => SomeObject::all()
]);

return View::make('myview', compact('server_data'));

템플릿:

<script type="application/json" name="server-data">
    {{ $server_data }}
</script>
<!-- Inserts server data into window.server_data -->
<script>
    var json = document.getElementsByName("server-data")[0].innerHTML;
    var server_data = JSON.parse(json);
</script>

vue 초기화에서 계산된 속성을 입력했습니다.

computed: {
    'server_data': function(){
        return window.server_data;
    }
}

그런 다음 컴포넌트 템플릿에서 데이터에 액세스할 수 있습니다.server_data.some_object.

이를 통해 많은 html 속성을 필요로 하지 않고 많은 구조화된 데이터를 전달할 수 있습니다.또 다른 이점은 json 인코딩에 의해 데이터가 이스케이프된다는 것입니다.이렇게 하면 큰따옴표("")가 포함된 변수를 사용하는 잠재적인 버그가 방지되어 돔이 엉망이 됩니다.

보통 php 변수를 vue에 전달하기 위해 사용합니다.

<component-name :prop-name='@json($variable)'></component-name>

언급URL : https://stackoverflow.com/questions/41520258/how-to-pass-a-php-variable-to-vue-component-instance-in-laravel-blade