如何将Vue.js变量导入php函数？

Question

I have a Laravel 5.1 project that I'm trying to improve and now migrating some features to Vue.js to make it more interactive and stuff.

In my view I have

<img src="{{ file_storage_path($product->path) }}" alt="{{$product->name}}"/>

This is default implementation using Laravel's blade.

Now, when I delegate this to the Vue.js I would have something like this

<img src="{{ file_storage_path(product.path) }}" alt="@{{product.name}}"/>

But this of course fails. So I need both - to invoke a php-function and at the same time to render Vue data.

I tried this

src="{{ file_storage_path( @{{product.path}} ) }}"

But of course this fails too. any suggestions?

Answer 1

Since I couldn't find a way to inline both blade syntax and Vue.js variable rendering I see the solution is to first invoke the php function and then append the Vue.js rendering to it.

So, the workaround would be

 <img :src="'{{ file_storage_path('/') }}' + image.path" alt="@{{product.name}}" />

This solution would work only for specific case, it doesn't get answer to my original question, when a php function actually needs to accept a Vue variable. But in this case, I can simply append values.