在 Vue.js + Laravel 中在 @{{ }} 中传递 $var 无效

Question

我正在 Laravel 项目中实施 Algolia Vue-InstantSearch。由于我们正在编辑 blade 文件，因此 {{ }} 序列将由 php 模板引擎解释。我们可以告诉 Blade 忽略那些，以确保它们只被 Vue 解释，在 JavaScript 中，通过在前面加上 @.

考虑到这一点，我想在@{{}}中传递一个带有文本的变量，但我找不到方法。作为一个例子，我试过：

$a = "price ";

$var = $a . "result";

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

这是我的原始代码：

<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>

感谢任何帮助。

Answer 1

当 laravel 看到 @{{}} 时，它认为它不应该处理并删除 @，所以最终你会留下 {{$var}} 这将由 Vue 处理，但是，要让 Vue 处理它，它必须是 Vue 实例的一部分，因此在您的示例中，您需要像这样的东西：

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

在你的情况下，我希望得到：

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

开发人员控制台中的消息，因为您已将 javascript 变量放置在 vue 实例本身之外。

Answer 2

Blade中Vue表达式的写法

由于 Vue 和 Blade 的 in-markup 表达式都标有 {{}}，因此我们需要区分两者。

Blade 首先处理并忽略 @{{}} 表达式并删除 @ 以便 Vue 可以处理它。

在 Vue.js + Laravel 中在 @{{ }} 中传递 $var 无效

Passing $var inside @{{ }} in Vue.js + Laravel not working

javascript

php

vue.js

laravel-5

algolia