在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
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 3

@verbatim 二选一

4个月前 评论
Blade::setEscapedContentTags('[[', ']]');
Blade::setContentTags('[[[', ']]]');

可以替换成别的 。比如 @@ 或者 !! 等任意你喜欢的。

4个月前 评论
nff93

blade 中使用 @{{ }} 之后,不用设置 app.config.compilerOptions.delimiters

4个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!