Vue列表没有显示javascript字典的键？

Posted 2021-03-30

我正在尝试使用v-for元素在列表中显示javascript字典的键。字典开始为空，但是基于API调用添加了键和值。数据结构如下。 （我JSON.stringified它可视化数据，但原始的javascript对象是一个标题为fullFileList的字典。）

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"
      }
    ]
  }
}

我这样初始化Vue：

var vm = new Vue({
   el: '#all',
   data: {
       files: fullFileList
   }
})

我的html是这样的：

  <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>

任何点都不会出现列表元素。出了什么问题？

编辑：为了澄清，这是如何将数据添加到fullFileList字典变量的示例：

原始变量在javascript文件的顶部定义如下：

fullFileList = {}

键和值的添加方式如下：

  basefilename = path.basename(fileNames[loadFile])

  fullFileList[basefilename] = {}
  fullFileList[basefilename]['textbody'] =  result['html']
  fullFileList[basefilename]['filetitle'] = basefilename

答案

您需要使对象分配有效。您缺少对象的分配let fullFileList = ...完成后，将显示文件列表。

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>

另一答案

fullFileList{} rather fullFileList = {}似乎有错误

您还可以使fullFileList成为一个数组。

    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"
          }
        ]
      }
}
    ]

以上是关于Vue列表没有显示javascript字典的键？的主要内容，如果未能解决你的问题，请参考以下文章

如何获取字典中的键列表？

Python - 如何在遍历字典列表时处理丢失的键？ [复制]

如何通过列表理解检索字典的键列表和值？

字典知识总结

如何从字典中检查特定字符串的键[重复]

如何在 vue 中仅显示对象的键值