如何使用Laravel变量作为键索引Vue中的savingNotes字典

问题原因 #

你的代码无法运行是因为Blade模板引擎不会解析被@转义的{{ ... }}范围内的插值语法，你将Laravel的{{ $key }}嵌套在@{{ ... }}内部，最终输出到前端的代码为{{ savingNotes[{{ $key }}] }}，Vue无法识别嵌套的双花括号结构，因此无法正常取值。

解决方案 #

方案1（更推荐，无语法冲突）：使用Vue v-text指令

完全避开双花括号嵌套冲突，让Laravel先渲染输出键值，再交给Vue处理即可：

• 若$key为数字类型：

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

• 若$key为字符串类型，需额外加单引号包裹，避免Vue将键名识别为变量：

<span v-text="savingNotes['{{ $key }}']"></span>

方案2：保留双花括号插值写法

如果需要沿用双花括号写法，可让Blade直接拼接输出完整的Vue插值字符串：

• 数字键：

{{ '{{ savingNotes[' . $key . '] }}' }}

• 字符串键：

{{ '{{ savingNotes[\'' . $key . '\'] }}' }}

内容的提问来源于stack exchange，提问作者arbyys