使用 Laravel 变量索引 Vue​​ 字典

Posted 2023-03-14

【中文标题】使用 Laravel 变量索引 Vue​​ 字典

【英文标题】：Indexing a Vue dictionary with Laravel variable

【发布时间】：2021-11-09 09:36:24

【问题描述】：

我想在 Vue 的双大括号内使用 Laravel 的双大括号语法，用 @ 语法转义。

在下面的代码中（不起作用），savingNotes 是 Vue 中的字典，我想使用 Laravel 变量作为键来为该字典选择一个项目。

@foreach($notes as $key => $note)
    <div class="note">
        <div class="note-heading">
            @ savingNotes[ $key ] 
             $note->name 
        </div>
        <hr class="note-hr">
        <div class="note-content">
             $note->content 
        </div>
    </div>
@endforeach

【参考方案1】：

您可以使用 @verbatim directive 来转义您会被 VueJS 隐藏的部分

@verbatim savingNotes @endverbatim ['$key'] @verbatim  @endverbatim 

但是，这是令人头疼的代码。更清晰的方法是在 VueJS 中创建一个自定义指令并将密钥传递给它。

new Vue(
  el: "#app",
  directives: 
    'saving-notes': 
        inserted: function (el, binding, vnode) 
            el.innerhtml = vnode.context.savingNotes[binding.expression]
        
    
  ,
  data: 
      savingNotes: 
        'test-key': 'testvalue'
      
  ,
)

然后在你的刀片模板中，写：

    <div class="note-heading">
            <span saving-notes="$key"></span>
             $note->name 
    </div>