在Laravel中 在blade模版中使用vue, 怎样处理 v-for {{}}标签冲突的情况,目前使用了好几种方式都没有效果
1. 运行环境
1). 当前使用的 Laravel 版本?
10.x
2). 当前使用的 php/php-fpm 版本?
PHP 版本:8.2
3). 当前系统
Ubuntu 20.4
2. 问题描述?
在Laravel中 在blade模版中使用vue, 怎样处理 v-for {{}}标签冲突的情况,目前使用了好几种方式都没有效果,
目前只有在v-for中不生效,尝试了文档中 @ 符号, vue 模版解析转义:app.config.compilerOptions.delimiters = [‘${‘, ‘}’]
均不会生效,请问要怎么配置呢?
@verbatim
<div class="flex flex-nowrap overflow-y-auto mt-3 no-scrollbar">
<a v-for="(item, index) in data" :href="'/index/show/' + item.id">
<div class="flex flex-col flex-shrink-0 relative w-32" :class="{ 'ml-2.5': index > 0 }">
<img class="w-32 h-14 object-cover"
src="@{{ item.cover_img }}"
:srcset="item.cover_img"
alt="">
<div
class="absolute bg-black bg-opacity-80 w-10 h-4 top-1 left-1 rounded opacity-100 flex items-center justify-center">
<span class="text-white text-xs">@{{ item.name }}</span>
</div>
<div
class="text-main-theme font-normal break-words text-xs mt-2 w-full">@{{ item.name }}</div>
</div>
</a>
</div>
@endverbatim
@
和verbatim
二选一可以替换成别的 。比如 @@ 或者 !! 等任意你喜欢的。
blade
中使用@{{ }}
之后,不用设置app.config.compilerOptions.delimiters