使用 Laravel 变量索引 Vue 字典

【问题标题】：Indexing a Vue dictionary with Laravel variable使用 Laravel 变量索引 Vue 字典
【发布时间】：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

【问题讨论】：

标签： laravel vue.js laravel-blade

【解决方案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>

【讨论】：