How to pass a PHP variable to Vue component instance in Laravel blade?

by

You have to use Vue’s props to be able to pass attributes to Vue’s components through markup. Take a look at the following example:

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

In your Vue component:

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

Now in other parts of your Vue component, you can access this value as this.clientId.

Issue Details

Please note that in HTML we write attribute name in kebab-case but in Vue side we write it in camelCase. More info in official docs here.

Also, you are using Vue’s v-bind shorthand in :clientId="{{ $client->id }}" which means that Vue will deal anything inside double quotes as a JavaScript expression, therefore you may get errors in that case as well. Instead, you should use this format clientId="{{ $client->id }} without a colon.

More Related Contents:

  1. Laravel 5.2 CORS, GET not working with preflight OPTIONS
  2. How to Convert string response to array laravel
  3. How to fix Error: laravel.log could not be opened?
  4. Trying to get property of non-object – Laravel 5
  5. Difference between method calls $model->relation(); and $model->relation;
  6. Ajax LARAVEL 419 POST error
  7. Laravel, sync() – how to sync an array and also pass additional pivot fields?
  8. Laravel 5.2 $errors not appearing in Blade
  9. Php artisan make:auth command is not defined
  10. How to bind parameters to a raw DB query in Laravel that’s used on a model?
  11. Trying to get Laravel 5 email to work
  12. Access to Laravel 5 app locally from an external device
  13. Apache Mod Rewrite For Laravel
  14. Laravel Migration table already exists, but I want to add new not the older
  15. Script @php artisan package:discover handling the post-autoload-dump event returned with error code 255
  16. Laravel 5.1: keep uploaded file as old input
  17. How Can I Set the Default Value of a Timestamp Column to the Current Timestamp with Laravel Migrations?
  18. Laravel app stopped working after upgrading to php 8
  19. How to Make Laravel Eloquent “IN” Query?
  20. Laravel Eloquent ORM Transactions
  21. Route [login] not defined
  22. Laravel Eloquent sort by relation table column
  23. My Laravel 5.2.10 Sessions wont persist
  24. laravel 5.3 new Auth::routes()
  25. Using namespaces in Laravel 4
  26. Laravel collection converts array to object
  27. Laravel extend Form class
  28. Error 405 (Method Not Allowed) Laravel 5
  29. Laravel: Validate maximum File size?
  30. Can’t make Laravel 4 to work on localhost

Leave a Comment