Как передать переменную PHP в экземпляр компонента Vue в блейде Laravel?
Как передать значение переменной PHP компоненту Vue в блейд-файлах Laravel?
В моем примере у меня есть встроенный шаблон детали клиента, я получаю это представление от Laravel так что теперь я хочу передать id который идет с 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 }"Но это не работает.
Решение
Вы должны использовать Vue’s 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 мы пишем имя атрибута в Шашлык случая но в Vue стороне мы пишем это в верблюжьего. Больше информации в официальные документы здесь.
Кроме того, вы используете Vue v-bind стенография в :clientId="{{ $client->id }}" Это означает, что Vue будет обрабатывать что-либо внутри двойных кавычек как выражение JavaScript, поэтому в этом случае вы также можете получить ошибки. Вместо этого вы должны использовать этот формат clientId="{{ $client->id }} без двоеточия.
Другие решения
Я только что сделал это, и это прекрасно работает для меня. Использование 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, если вы хотите незашифрованные данные (которые в этом случае вы бы), то используйте {!! !!}
Для любого, кто сталкивается с этой темой и все еще получает ошибки, ответ правильно дан выше Мустафой Эхсаном, но не объяснен. Метод проб и ошибок помог мне увидеть это.
Мой компонент в 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>
Мне пришлось передать некоторые данные сервера в мой компонент 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. Это позволяет избежать потенциальных ошибок с переменными, содержащими двойные кавычки («), которые могут испортить дом.