如何在 vuejs 指令中使用 Laravel Blade 语法？

Posted 2023-03-14

【中文标题】如何在 vuejs 指令中使用 Laravel Blade 语法？

【英文标题】：How to use Laravel Blade syntax inside vuejs directives?

【发布时间】：2021-10-13 22:52:19

【问题描述】：

我刚开始学习 vuejs，我正在尝试将它整合到我的 laravel 项目中，但我遇到了问题。我的 vue 对象中有一组图像路径，如下所示：

 new Vue(
        el: '#app',

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

我想使用 Laravel 的asset() 帮助器遍历所有图像并在我的页面中显示它们。我试过这样使用它：

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

但它不识别 vue 指令：

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

【问题讨论】：

试试不带':'的src

那只是忽略vue变量，路径变成src="127.0.0.1:8000/image"

你不能使用资产助手来处理 vue 数据，因为 laravel 先渲染而 vue 在客户端渲染，所以这是不可能的。相反，您可以尝试使用基本网址 :src="' url()->to('/') /'+image"

【参考方案1】：

我认为您需要尝试像以下方式迭代循环：

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

assets helper 需要以下代码：

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

希望对你有帮助

【讨论】：

这确实有效，但有人告诉我使用asset() 助手。我会把它标记为正确的，但你可能知道何时以及为什么应该使用 laravel 助手？文档没有对此进行扩展。

【参考方案2】：

您可以转义 VueJS 数据绑定语法，以便同时使用 Blade 和 Vue：

这里是答案，更多详情请阅读：https://***.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>

【讨论】：

正如我想象的那样，你想让我做<img v-for="image in images" src=" asset('@ image ') ">，但这会引发错误Unclosed '(' does not match ''

@Nutenn 不行，你需要用双感叹号<img v-for="image in images" :src="!! asset('image') !!">

这只会引发类似的错误：[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"

@Nutenn 糟糕，我多放了一个 ，删除一个再试一次，应该是 !! !!