CODEWITHSUNDEEP
javascriptjsonobjectvue.jsvue-component
Michał Kruk
Michał Kruk

Reputation: 175

Display whole objects in Vue.js

Problem is that: I need to display and possible to change 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.

Upvotes: 1

Views: 1560

Answers (2)

Mickael Lherminez
Mickael Lherminez

Reputation: 695

Can you use a library?

To display a JSON with a view. I use the very good library https://leezng.github.io/vue-json-pretty/ .

It takes as a parameter a json of any form.

Good continuation.

Upvotes: 2

Fab
Fab

Reputation: 4657

You can use a textarea with a computed property (with getter and setter) as 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 , '\t' )

                },

                set(val) {

                    this.my_JSON = JSON.parse(val);

                }

            }

        }

    }
</script>

Upvotes: 2

Related Questions