时间戳

首页 > 解决方案 > 从 Vue 中的（未知深度）多维对象渲染列表

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

问题描述

想象一个具有以下结构的 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))<--;。

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

标签： javascriptjsonvue.js

解决方案

我要做的与您制作的 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/

推荐阅读