如何在 Vue.js 中显示 JSON 键？答案

【问题标题】：How to display JSON keys in Vue.js?如何在 Vue.js 中显示 JSON 键？
【发布时间】：2020-05-08 14:44:13
【问题描述】：

我有一些如下所示的 JSON：

    {
    "data": [
        {
            "name": "someName",
            "link": "http://somelink.com",
            ],
            "relevantArray": [
                {
                    "keyIWant": 42
                }
            ],
            ...
     }

我得到这样的数据：

<li v-for="(dataVue, index) in dataList.feat" :key="index">
          {{ dataVue.someName }}
          {{ dataVue.link}}
          {{ dataVue.??? }}
</li>

我应该写什么来返回 keyIWant - key 的名称，而不是值 (42)？？

编辑： 我可以通过写输出JSON

{{dataVue.relevantArray}}

但这会像这样返回 JSON：

[ { "relevantArray": keyIwant } ]

我只是无法让相关数组自行返回。代码沙盒：

https://codesandbox.io/s/festive-wu-41kyz?file=/src/App.vue

【问题讨论】：

Object.keys(dataVue.relevantArray[0])[0]?
Have you considered searching for the answer before posting? 你检查过你的index 变量有什么吗？
呃，如何在 Vue.js 中输入？ {{ Object.keys(featData.prerequisite[0])[0] }} 是无效的，假设您的意思是 keys = key，但这会破坏 Vue.js
也许是这个？ {{dataVue.releventArray[0].keyIwant}}
返回值 - 即。 42，而不是它的键/名称。

标签： javascript json vue.js

【解决方案1】：

试试这个https://codesandbox.io/s/mystifying-brook-42m3x

基本上你可以使用 v-for 将任何对象作为键值进行迭代

<li v-for="(vueData, index) in vueData.data" :key="index">
  {{ vueData.someName }}
  {{ vueData.link }}
   <span
     v-for="(r,ri) in vueData.relevantArray[0]"
     :key="ri"
     >{{ ri }} ==> {{ r }}
   </span>
</li>

会给你这样的东西

someName http://somelink.com keyIWant ==> 42

【讨论】：

这几乎是完美的（！！！！），但如果我在相关数组中有多个，我需要将它包裹在附加的 v-for 周围吗？

【解决方案2】：

Arief 的回答由于某种原因没有解决问题，但我尝试了一下，找到了以下解决方案：

<span
     v-for="(r,ri) in vueData.relevantArray[0]" :key="ri">
      {{ ri }} ==> {{ r }}
         <span v-for="(arrayData, index) in r" :key="index">
            {{index}}
         </span>
   </span>

这就是我想要的输出，在我的情况下，执行上述解决方案会输出数组。我会将 Arief 的解决方案标记为答案，因为它引导我找到我的解决方案。

如果有人想告诉我为什么我必须做我的版本，我将非常感激。

谢谢大家！！

【讨论】：