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

【问题标题】：Render list from (unkown deep) multidimensional object in Vue从 Vue 中的（未知深度）多维对象渲染列表
【发布时间】：2019-11-26 15:56:29
【问题描述】：

想象一个具有以下结构的 JSON 对象：

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

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

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

<ul>
  <li>
    dimension-1
    <ul>
      <li>value-1</li>
      <li>value-2</li>
      <li>value-3</li>
      <li>value-4</li>
    </ul>
  </li>
  <li>
    dimension-2
    <ul>
      <li>value-1</li>
      <li>value-2</li>
      <li>value-3</li>
      <li>value-4</li>
      <li>
        dimension-2.1
        <ul>
          <li>value-1</li>
          <li>
            dimension-2.2
            <ul>
              <li>value1</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

使用普通的 JS 这很容易做到：

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

function createHTML(json, isArray) {

  var html = '<ul>';
  for (var key in json) {
    if (typeof json[key] == 'object') {

      html += '<li>' + (!isArray ? '<strong>' + key + '</strong>' : '') + '</li>' + createHTML(json[key], (json[key] instanceof Array ? 1 : 0));
    } else {
      html += '<li>' + key + '</li>';
    }
  }
  return html + '</ul>';

}

document.getElementById('output').innerHTML = createHTML(object, false);

&lt;div id="output"&gt;&lt;/div&gt;

Copied and changed from here

但是，由于html += '<li>' + (!isArray ? '<strong>' + key + '</strong>' : '') + '</li>' + -->createHTML(json[key], (json[key] instanceof Array ? 1 : 0))<--;这个部分，这显然行不通。

那么我的问题的解决方案或替代方案是什么？

【问题讨论】：

看这里vuejsdevelopers.com/2017/10/23/…

标签： javascript json vue.js

【解决方案1】：

我要做的和你做的 JavaScript sn-p 一样。您只需要将 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>

不理想，因为您在那里丢失了 Vue 部分，但又快又容易。如果您想在构建此递归列表时获得更多详细信息，可以查看：https://alligator.io/vuejs/recursive-components/

【讨论】：