Vue中多维对象的呈现列表

Question

假设有以下结构的JSON对象：

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

该对象可以有无限数量的嵌套，其数量为未知。

我想要创建一个列表，它通过使用Vue列表呈现特性或类似的东西来表示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);

<div id="output"></div>

​

从这里复制和改变

但是，这显然不能工作，因为这部分html += '<li>' + (!isArray ? '<strong>' + key + '</strong>' : '') + '</li>' + -->createHTML(json[key], (json[key] instanceof Array ? 1 : 0))<--;。

那么，我的问题的解决方案是什么，还是替代方案呢？

Answer 1

我要做的就是和你做的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>

不理想，因为你失去了Vue的部分，但快速和容易。如果您想在构建这个递归列表时获得更多的详细信息，您可以查看以下内容：https://alligator.io/vuejs/recursive-components/