Question

我目前有一组循环通过JSON的嵌套模板。它输出密钥，检查值是否不是对象，如果它不是对象则输出值，否则它会更深并遍历该属性的内部对象/数组。目前它大约有3层，但可能还需要更进一步。

这使它成为递归的理想选择。我是前端语言/框架的新手，我无法找到有关如何使用Vue动态遍历JSON的良好资源的良好资源。 This was the best I could, but I'm not using predictable properties like label/node/nodes.

我想一个好的起点是Vue.component模板。如何从主Vue实例传入JSON，然后如何设置模板以动态遍历JSON？

HMTL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue: Recursion</title>

  <!-- CDNs -->
  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

  <!-- JS -->
  <script src="app.js" charset="utf-8"></script>
</head>
<body>

  <main id="app">
    <template>
      <section>
        <recursive-component></recursive-component>
      </section>
    </template>
  </main>

</body>
</html>

的Javascript

$(function () {
  // Get JSON
  $.getJSON("./data.json", function (json) {
    app.json = json
  });


  Vue.component('recursive-component', function() {
    template: `
      <recursive-component
       v-if="node !== null"
       v-for="(node, key) in nodes"
       :nodes="node.nodes"
       :key="node.key"
       >
      </recursive-component>`
  });

  var app = new Vue({
    el: `#app`,
    data: {
      json: null
    }
  });
});

通用JSON

{
  "details": {
    "manufacturer": "BMW",
    "seats": 4,
    "engine": {
      "torque": 500,
      "hp": 600
    },
    "breaks": {
      "front": {
        "type": "XYZ",
        "capacity": 1234
      }
    }
  }
}

Answer 1

解决方案的关键是检查数据是值还是对象，我做了这个例子，假设值只是数字和字符串（因为检查变量是否是一个对象非常复杂StackOverflow），然后递归组件只相应地显示键/值。

const jsonData = {
  "details": {
    "manufacturer": "BMW",
    "seats": 4,
    "engine": {
      "torque": 500,
      "hp": 600
    },
    "breaks": {
      "front": {
        "type": "XYZ",
        "capacity": 1234
      }
    }
  }
};

Vue.component("my-recursive-component", {
  template: '#my-recursive-component',
  props: ["depth", "payload"],
  data() {
  },
  computed: {
    indent() {
      return { transform: `translate(${this.depth * 10}px)` }
    },
    type() {
      if (typeof this.payload === "string" || typeof this.payload === "number") {
        return "value";
      }
      return "obj";
    },
    list() {
      if (this.type === "obj") {
        return Object.keys(this.payload);
      }
      return undefined;
    }
  }
});

const app = new Vue({
  el: "#app",
  data() {
    jsonData
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  Recursive Component Demo:
  <my-recursive-component
    :payload="jsonData"
    :depth="0"
  >
  </my-recursive-component>
</div>

<script type="text/x-template" id="my-recursive-component">
  <div>
    <div 
      v-if="type === 'obj'" :style="indent">
      <div v-for="item in list">
        Key: {{item}}
        <my-recursive-component
          :payload="payload[item]"
          :depth="depth + 1"
          >
         <my-recursive-component/>
       </div>
    </div>
    <div 
      v-if="type === 'value'" :style="indent">
      Value: {{payload}}
    </div>
  </div>
</script>

使用JSON在Vue组件中使用递归

1 个答案: