javascript - 在Vue.js中显示整个对象(Display whole objects in Vue.js)

Question

Problem is that: I need to display and possible to change JSON.(问题是：我需要显示并可能更改JSON。)

I want to display it as a tree of directory.(我想将其显示为目录树。) I don't know how object will be look.(我不知道物体的外观。) It can be like this:(可能是这样的：) "buttons": { "login": "LOGIN", "register": "REGISTER", "next": "Next", }, "nav": { "account": "Acount", "login": "Login" }, But sometimes it can be like this:(但有时可能是这样的：) "register": { "user": "User", "email": "E-mail", "language": { "en": "English", "de": "German", "es": "Spanish", } }, "blog": { "search": "SEARCH", "comments": "COMMENTS" }, The problem is i don't know how nested it will be.(问题是我不知道它会如何嵌套。) I already wrote parser and i parse it into object, but i have no idea how to display it on site.(我已经编写了解析器，并将其解析为对象，但是我不知道如何在网站上显示它。)   ask by Micha? Kruk translate from so

Answer 1

You can use a textarea with a computed property (with getter and setter) as v-model .(您可以将具有计算属性（带有getter和setter）的textarea用作v-model 。)

Something like this:(像这样：) <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 , '' ) }, set(val) { this.my_JSON = JSON.parse(val); } } } } </script>