Solución:
Tienes que usar Vue’s props para poder pasar atributos a los componentes de Vue a través del marcado. Eche un vistazo al siguiente ejemplo:
<client-details inline-template client-id="{{ $client->id }}">
<div id="client-details" class="">
My HTML stuff
</div>
</client-details>
En su componente de Vue:
Vue.component('client-details', {
props: [
{
name: 'clientId',
default:0,
}
]
});
Ahora, en otras partes de su componente Vue, puede acceder a este valor como this.clientId.
Detalles del problema
Tenga en cuenta que en HTML escribimos el nombre del atributo en caja de kebab pero en el lado de Vue lo escribimos en el caso de Carmel. Más información en los documentos oficiales aquí.
Además, estás usando Vue’s v-bind taquigrafía en :clientId="{{ $client->id }}" lo que significa que Vue tratará cualquier cosa entre comillas dobles como una expresión de JavaScript, por lo que también puede obtener errores en ese caso. En su lugar, debe utilizar este formato clientId="{{ $client->id }} sin dos puntos.
Acabo de hacer esto y me está funcionando muy bien. Usando Laravel 5.4 y Vue 2.x.
En mi componente, declare una propiedad (props) para el objeto:
props: ['currentUser'],
En la página de mi hoja donde se crea una instancia del componente:
<my-component v-bind:current-user="{!! Auth::user()->toJson() !!}"></my-component>
Tenga en cuenta que en el componente, estoy usando camelCase para currentUser, pero debido a que html no distingue entre mayúsculas y minúsculas, debe usar kebab-case (por lo tanto, el ‘usuario actual’).
También tenga en cuenta que si usa la sintaxis blade {{ }} luego los datos entre se ejecutan a través de php htmlspecialchars. si desea datos no codificados (que en este caso lo haría), utilice {!! !!}
Para cualquier persona que se encuentre con este hilo y todavía reciba errores, la respuesta la dio correctamente Mustafa Ehsan anteriormente, pero no se explica. La prueba y el error me ayudaron a verlo.
Mi componente en newuser.blade.php
<access-request
firstname="{{ $newuser->firstname }}"
lastname="{{ $newuser->lastname }}"
accessid="{{ $newuser->id }}"
>
</access-request>
Es muy importante tener en cuenta el método de encuadernación utilizado. En el componente anterior, escribí solo el nombre del enlace de datos (como los accesorios de React), luego lo registré en los accesorios del componente (ver más abajo). Así es como Mustafa escribió su encuadernación en su respuesta y funciona bien. La otra forma más Vue de pasar los accesorios es con v-bind: o:, pero debe asegurarse de usar comillas dobles y comillas simples:
:firstname="'{{ $newuser->firstname }}'"
Sin ambas comillas, obtienes advertencias de 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>