在 Vue.js 中显示整个对象答案

【问题标题】：Display whole objects in Vue.js在 Vue.js 中显示整个对象
【发布时间】：2020-03-24 21:23:21
【问题描述】：

问题是：我需要显示并且可以更改 JSON。我想将它显示为目录树。我不知道对象的外观。可以是这样的：

"buttons": {
    "login": "LOGIN",
    "register": "REGISTER",
    "next": "Next",
},
"nav": {
    "account": "Acount",
    "login": "Login"
},

但有时可能是这样的：

"register": {
    "user": "User",
    "email": "E-mail",
    "language": {
        "en": "English",
        "de": "German",
        "es": "Spanish",
    }
},
"blog": {
    "search": "SEARCH",
    "comments": "COMMENTS"
},

问题是我不知道它的嵌套程度。我已经编写了解析器并将其解析为对象，但我不知道如何在网站上显示它。

【问题讨论】：

尝试 JSON.stringify(yourJSON, null, '\t');或 JSON.stringify(yourJSON, null, ' ');
它的工作，但不完全是我想要的，我现在如何更改该对象的值

标签： javascript json object vue.js vue-component

【解决方案1】：

您可以将textarea 与计算属性（带有getter 和setter）一起用作v-model。

类似这样的：

<textarea v-model="my_JSON_model"></textarea>

<script>
    export default {

        data() {
            return {
                my_JSON: {} // import here your json
            }
        },

        computed: {

            my_JSON_model: {

                get() {

                    return JSON.stringify( this.my_JSON , null , '\t' )

                },

                set(val) {

                    this.my_JSON = JSON.parse(val);

                }

            }

        }

    }
</script>

【讨论】：

【解决方案2】：

你可以使用图书馆吗？

显示带有视图的 JSON。我使用非常好的图书馆 https://leezng.github.io/vue-json-pretty/ .

它将任何形式的json作为参数。

很好的延续。

【讨论】：

我可以，但它允许我编辑该 json 上的值？
你可以在对象上做你想做的事。它只是您的 Json 对象到您的显示器的数据绑定。您可以随时进行计算或更改它的值。如果你改变它，你的显示值也会改变。
你能帮我解决这个问题吗？我不知道如何使用这个更高的期货（获取数据），我无法从文档中弄清楚我做错了什么。
是的，但我需要有关您的代码和收到的错误的更多详细信息。
谢谢您，我将等待答复！