Can't pass bcrypted value to a laravel blade vue

Question

I'm trying to pass a bcrypt value from my controller to my model and then to my view, the bcrypt is : $2y$10$jTlSwN9nLTGSoaljl2ZIJu8wsbY2StYUJGjWz.7LUx6K20ATLj/m2,

as I passed it into my laravel blade's vue inline-template as a props, it gives me error saying:

[Vue warn]: Error compiling template: invalid expression: Invalid or unexpected token in $2y$10$jTlSwN9nLTGSoaljl2ZIJu8wsbY2StYUJGjWz.7LUx6K20ATLj/m2 Raw expression: :access_code="$2y$10$jTlSwN9nLTGSoaljl2ZIJu8wsbY2StYUJGjWz.7LUx6K20ATLj/m2".

My Controller:

$user = Socialite::driver('google')->user();

$encrypted_access_code = bcrypt($user->id . ' ' . uniqid() . ' ' . now());

return CallbackRedirects::callbackredirects($encrypted_access_code);

My Model

public static function callbackredirects($access_code) {
    return view('callback.callback-redirect')->with('access_code', $access_code);
}

My View

@extends('layout.layout-main')
@section('content')
<callbackredirect inline-template :access_code="{{ $access_code }}">
<div>
    {{ $access_code }}
</div>
</callbackredirect>
@endsection

But when I pass any string, it works.

Answer 1

No need for the colon : before access_code, since it's not JavaScript code you are passing. Use: access_code="{{ $access_code }}".

It's better to use access-code="{{ $access_code }}", which is a html compliant property, accessible as accessCode in vue.