Как передать переменную PHP в экземпляр компонента Vue?

Как передать значение переменной в компонент vue?

В моем примере у меня есть встроенная информация о клиенте шаблона, я получаю это представление от laravel, поэтому теперь я хочу передать идентификатор, который поставляется с URL-адресом /client/1, на мой экземпляр vue.

Мой компонент, загружаемый 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 }"

но это не сработает.

Ответ 1

Вы должны использовать Vue 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,
        }
    ]
});

Теперь в других частях вашего компонента Vue вы можете получить доступ к этому значению как this.clientId.

Обратите внимание, что в HTML мы пишем имя атрибута в кебаб-case, но в Vue-стороне мы пишем его в camelCase. Подробнее в официальные документы здесь.

Ответ 2

Я просто сделал это, и он отлично работает для меня. Использование Laravel 5.4 и Vue 2.x.

В моем компоненте объявить свойство (реквизит) для объекта:

props: ['currentUser'],

На моей странице клика, где создается экземпляр компонента:

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

Обратите внимание, что в компоненте я использую camelCase для currentUser, но поскольку html нечувствителен к регистру, вы должны использовать kebab-case (таким образом, "текущий пользователь" ).

Также обратите внимание, что если вы используете синтаксис лезвия {{ }}, тогда данные между ними запускаются через php htmlspecialchars. если вы хотите получить незакодированные данные (которые в этом случае вы бы), используйте {!! !!}

Ответ 3

Для любого, кто сталкивается с этой темой и все еще получает ошибки, ответ правильно дан выше Мустафой Эхсаном, но не объяснен. Метод проб и ошибок помог мне увидеть это.

Мой компонент в newuser.blade.php

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

Очень важно отметить используемый метод привязки. На вышеупомянутом компоненте я написал только имя привязки данных (например, реквизиты React), а затем зарегистрировал его на реквизитах компонента (см. Ниже). Вот как Мустафа написал свой ответ в своем ответе и отлично работает. Другой, более удобный способ передачи реквизита - это v-bind: или:, но вы должны убедиться, что используются как двойные, так и одинарные кавычки:

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

Без обеих кавычек вы получите Vue предупреждения.

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

Ответ 4

Мне пришлось передать некоторые данные сервера моему компоненту Vue, я закончил создание переменной $server_data в контроллере и передал ее в тег json script.

В контроллере:

$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. Это позволяет избежать возможных ошибок с переменными, которые содержат двойные кавычки ("), что испортит dom.