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

Question

我刚开始学习 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"

Answer 1

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

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

assets 助手需要以下代码：

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

希望对你有所帮助

Answer 2

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

答案在这里，阅读它了解更多详情：

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

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

How to use Laravel Blade syntax inside vuejs directives?

laravel

vue.js

laravel-blade