Indexing a Vue dictionary with Laravel variable

I would like to use Laravel’s double curly bracket syntax inside of Vue’s double curly bracket escaped with @ syntax.

In code below (which is not working), savingNotes is a dictionary in Vue, and I would like to use Laravel variable as a key to select an item for this dictionary.

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


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use the @verbatim directive to escape parts that you would have transcluded by VueJS

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

However this is code that is a head scratcher. A clearer approach would be to create a custom directive in VueJS and pass the keys to it.

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

Then in your blade template, write:

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

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x