I'm implementing Algolia Vue-InstantSearch in a Laravel Project. Since we’re editing a blade file, the {{ }} sequence will be interpreted by the php template engine. We can tell Blade to ignore those, to make sure they are only interpreted by Vue, in JavaScript, by prepending an @.

Taking this into consideration, I would like to pass a variable with a text inside @{{}}, but I cannot find the way. As an example I tried:

$a = "price ";

$var = $a . "result";

but when I print @{{$var}} , no value is displayed

This is my original code:

<ais-results>
    <template scope="{ result }">
            <!-- BEGIN item -->
            <div class="item">
                <div class="item-info">
                    <div class="item-price">@{{result.price}}</div>
                </div>
            </div>
            <!-- END item -->
        <!-- END col-2 -->
    </template>
</ais-results>

Any Help Appreciated.

I'm implementing Algolia Vue-InstantSearch in a Laravel Project. Since we’re editing a blade file, the {{ }} sequence will be interpreted by the php template engine. We can tell Blade to ignore those, to make sure they are only interpreted by Vue, in JavaScript, by prepending an @.

Taking this into consideration, I would like to pass a variable with a text inside @{{}}, but I cannot find the way. As an example I tried:

$a = "price ";

$var = $a . "result";

but when I print @{{$var}} , no value is displayed

This is my original code:

<ais-results>
    <template scope="{ result }">
            <!-- BEGIN item -->
            <div class="item">
                <div class="item-info">
                    <div class="item-price">@{{result.price}}</div>
                </div>
            </div>
            <!-- END item -->
        <!-- END col-2 -->
    </template>
</ais-results>

Any Help Appreciated.

• javascript
• php
• laravel-5
• vue.js
• algolia

• Could you update your example with what you actually tried? I don't see an issue with the current code you are showing. – rayrutjes Commented Oct 26, 2017 at 6:55

2 Answers 2

It's a way to write Vue expression in Blade

As both Vue and Blade has their in-markup expression marked with {{}}, we need to differentiate the two.

Blade processes first and ignores the @{{}} expressions and removes the @ so that Vue can process it.

When laravel sees @{{}} it sees it as something it shouldn't process and removes the @, so ultimately you will be left with {{$var}} which will be processed by Vue, however, for Vue to process it, it must be part of a Vue instance, so in your example you would need something like:

new Vue({
  el: '#app', // or wherever you are mounting your instance
  data: {
    var: 'foo'
  }
});

In your case I would expect to be getting an:

Property or method "var" is not defined on the instance but referenced during render

message in your developers console, because you have placed your javascript variables outside of the vue instance itself.