Javascript Vue中（未知深度）多维对象的渲染列表

假设一个JSON对象具有以下结构：

{
  "dimension-1": {
    "value1": "",
    "value2": "",
    "value3": "",
    "value4": ""
  },
  "dimension-2": {
    "value1": "",
    "value2": "",
    "value3": "",
    "value4": "",
    "dimension-2.1": {
      "value1": "",
      "dimension-2.2": {
        "value1": ""
      }
    }
  }
}

对象可以有无限数量的嵌套，并且嵌套的数量是未知的

我想要创建的是一个列表，它通过使用特性或类似的东西（如果可能）来表示JSON对象。最后我会收到这样的东西：

维度-1

价值-1
价值-2
价值-3
价值-4



维度-2

价值-1
价值-2
价值-3
价值-4

尺寸-2.1

价值-1

尺寸-2.2

价值1

对于普通JS，这很容易做到：

const对象={
“维度-1”：{
“价值1”：“价值”，
“价值2”：“，
“价值3”：“，
“值4”：”
},
“维度2”：{
“价值1”：“价值”，
“价值2”：“，
“价值3”：“，
“价值4”：“，
“尺寸-2.1”：{
“价值1”：“价值”，
“尺寸-2.2”：{
“值1”：”
}
}
}
}
函数createHTML（json，isArray）{
var html='
'；
for（json中的var键）{
if（json[key]=='object'）{
html++='
'+（！isArray？''+key+''：''）+'
'+createHTML（json[key]，（json[key]数组实例？1:0））；
}否则{
html+='
'+key+'
'；
}
}
返回html+“
”；
}
document.getElementById（'output'）.innerHTML=createHTML（object，false）
我要做的与您制作的JavaScript代码片段相同。只需将
document.getElementById
部分与适当的Vue
ref
交换即可

例如：

<template>
   <div>
      <ul ref="myList"></ul>
   </div>
</template>
<script>
export default {
  name: "Example",
  mounted() {
     const myList = this.$refs.myList;
     myList.innerHTML = "<li>One element</li>";
  }
};
</script>



导出默认值{
名称：“示例”，
安装的（）{
const myList=this.$refs.myList；
myList.innerHTML=“
一个元素”
”；
}
};

这并不理想，因为您在那里丢失了Vue部分，但速度快且简单。
如果您想在构建此递归列表时获得更多详细信息，可以查看以下内容：
查看此处