Передача переменной php переменной для экземпляра компонента vue

Question

Как передать значение переменной компоненту 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 }" 

, но он не работает ,

Answer 1

Вы должны использовать Vue's props, чтобы иметь возможность передавать атрибуты компонентам Vue через разметку. Взгляните на следующий пример:

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

В компоненте Вю:

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

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

Пожалуйста, обратите внимание, что в HTML мы пишем имя атрибута в кебаб- случае, но в Vue стороне мы пишем его в верблюжьего. Больше информации в official docs here.

Answer 2

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

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

props: ['currentUser'],

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

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

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

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

Answer 3

Мне пришлось передать некоторые данные сервера моему компоненту 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> 

В вю инициализации, я поставил вычисляемое свойство:

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

Затем данные доступны в шаблоне компонента с server_data.some_object.