[Vuejs]-Vue list not displaying the keys of a javascript dictionary?

by

3👍

You need to make your object assignment valid. You are missing an assignment to the object let fullFileList = ... When this is done, the list of files display.

let fullFileList = {
  "8-27.TXT.rtf": {
    "textbody": "Lots of text.",
    "filetitle": "8-27.TXT.rtf",
    "entities": [{
        "name": "Mario Sartori",
        "type": "Person"
      },
      {
        "name": "Linda Grey",
        "type": "Person"
      },
      {
        "name": "Julia",
        "type": "Person"
      }
    ]
  },
  "8-28.TXT.rtf": {
    "textbody": "Also lots of text.",
    "filetitle": "8-28.TXT.rtf",
    "entities": [{
        "name": "Maine Health Foundation",
        "type": "Organization"
      },
      {
        "name": "Grzesiak",
        "type": "Person"
      },
      {
        "name": "Jim Williams",
        "type": "Person"
      }
    ]
  }
}

var vm = new Vue({
  el: '#all',
  data: {
    files: fullFileList
  }
})
.as-console-wrapper {display: none !important}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul id="all" class="nav flex-column nav-pills">
  <li v-for="(value,key) in files">
    <a class="nav-link" id="messages-tab" data-toggle="tab" role="tab" aria-controls="messages" aria-selected="false">
        {{ key }} </a>
  </li>
</ul>
👤Get Off My Lawn

0👍

There seems to be an error on fullFileList{} rather fullFileList = {}

You can also make fullFileList an array.

    fullFileList = [
      {"8-27.TXT.rtf": {
        "textbody": "Lots of text.",
        "filetitle": "8-27.TXT.rtf",
        "entities": [
          {
            "name": "Mario Sartori",
            "type": "Person"
          },
          {
            "name": "Linda Grey",
            "type": "Person"
          },
          {
            "name": "Julia",
            "type": "Person"
          }
        ]
      }
},
      {"8-28.TXT.rtf": {
        "textbody": "Also lots of text.",
        "filetitle": "8-28.TXT.rtf",
        "entities": [
          {
            "name": "Maine Health Foundation",
            "type": "Organization"
          },
          {
            "name": "Grzesiak",
            "type": "Person"
          },
          {
            "name": "Jim Williams",
            "type": "Person"
          }
        ]
      }
}
    ]
👤Lekens

Leave a comment