How to use Laravel Blade syntax inside vuejs directives?

Question

I just started learning vuejs and I'm trying to incorporate it in my laravel project but I'm running into a problem. I have an array of image paths inside my vue object like this:

 new Vue({
        el: '#app',

        data: {
            images: [
                "img/image-1.png",
                "img/image-2.png",
                "img/image-3.png"   
            ]
        }
    });

I would like to loop through all the images and display them inside my page using the Laravel asset() helper. I tried using it like this:

<img v-for="image in images" :src="{{ asset('image') }}">

But it doesn't recognize the vue directive:

[Vue warn]: Error compiling template:

invalid expression: Unexpected token ':' in

http://127.0.0.1:8000/image

Raw expression: :src="http://127.0.0.1:8000/image"

That just ignores the vue variable and the path becomes src="127.0.0.1:8000/image" — Nutenn
– Nutenn, Commented Aug 10, 2021 at 11:26
You can't use asset helper for vue data because laravel renders first and vue renders on client-side so it's impossible. Instead you can try with base url :src="'{{ url()->to('/') }}/'+image" — fatm
– fatm, Commented Aug 10, 2021 at 11:54

Amit Senjaliya · Accepted Answer · 2021-08-10 12:32:17Z

0

I think you need to try to iterate the loop like following way:

<div v-for="image in images">
    <img :src="image" class="" />
</div>

For assets helper need below code:

<img  src=""  :src="'{{ asset('yourfilepath') }}' +  '/' + image">

I hope it will help to you

edited Aug 10, 2021 at 12:32

answered Aug 10, 2021 at 11:17

Amit Senjaliya

2,9651 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nutenn Over a year ago

This actually works but I've been told to use the asset() helper. I`ll flag it as correct, but do you maybe know when and why you should use the laravel helpers? The documentation doesn't expand on it.

Mikel Granero · Accepted Answer · 2021-08-10 11:23:32Z

0

You can escape the VueJS data binding syntax so you can use Blade and Vue at the same time:

Here's the answer, read it for more details: https://stackoverflow.com/a/37934125/9453309

<div>
  <!-- HTML rendering with VueJS -->
  @{{ selectedQuestionDesc }} 
  <!-- Data binding with VueJS -->
  @{{ selectedQuestionDesc }}
</div>
<div>
  <!-- HTML with Laravel Blade -->
  {!! $selectedQuestionDesc !!}
  <!-- Variable binding with Laravel Blade -->
  {{ $selectedQuestionDesc }} 
</div>

answered Aug 10, 2021 at 11:23

Mikel Granero

4198 silver badges16 bronze badges

4 Comments

Nutenn Over a year ago

As I imagine, you want me to do <img v-for="image in images" src="{{ asset('@{{ image }}') }}">, but that throws an error Unclosed '(' does not match '}'

Mikel Granero Over a year ago

@Nutenn No, you need to use double exclamations <img v-for="image in images" :src="{{!! asset('image') !!}}">

Nutenn Over a year ago

That just throws a similar error:

[Vue warn]: Error compiling template:  invalid expression: Unexpected token '}' in      {http://127.0.0.1:8000/image}    Raw expression: :src="{http://127.0.0.1:8000/image}"

Mikel Granero Over a year ago

@Nutenn Oops, I put an extra {}, remove one and try again, it shoud be {!! !!}

Collectives™ on Stack Overflow

How to use Laravel Blade syntax inside vuejs directives?

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related