我目前有一组循环通过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？
HTML
<!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/[email protected]/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
}
}
}
}
解决方案的关键是检查数据是值还是对象，我做了这个例子假设值只是数字和字符串（因为要检查变量是否是一个对象是非常复杂的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>