VueJS: Loop through JSON-object

Question

I would like to use this JSON and loop through each items using VueJS' v-for.

I'm using an array to store the translations of a dataset. The translations are located in data.translations.

But this is what happens: http://d.pr.it/1k1Yb

This is my source code of the template:

<!--suppress ALL -->
<template>
    <div class = "uk-form-row">
        <span class = "uk-form-label">{{ data.type | trans }}</span>
        <div class = "uk-form-controls uk-form-controls-text">
            <a href = "#{{ data.type }}" data-uk-modal class = "uk-placeholder uk-text-center uk-display-block uk-margin-remove">
                <p class = "uk-text-muted uk-margin-small-top">Text...</p></a>
        </div>
    </div>
    <div id = "{{ data.type }}" class = "uk-modal">
        <div class = "uk-modal-dialog uk-modal-dialog-large">
            <ul class = "uk-tab" v-el:tab>
                <li><a>{{ 'New Translation' | trans }}</a></li>
                <li><a>{{ 'Edit Translations' | trans }}</a></li>

            </ul>
            <div class = "uk-switcher uk-margin" v-el:content>
                <div>
                    <form class = "uk-form uk-form-stacked" v-validator = "formTemplates" @submit.prevent = "add | valid">
                        <div class = "uk-form-row">
                            <div class = "uk-form-label">
                                <select class = "uk-form-medium" id = "countrycode" name = "countrycode" v-model = "newTemplate.countrycode" v-validate:required>
                                    <option v-for = "country in countries" value = "{{ $key }}" :disabled = "countryMatch($key)">
                                        {{country}}
                                    </option>
                                </select>
                                <p class = "uk-form-help-block uk-text-danger" v-show = "formTemplates.countrycode.invalid">
                                    {{
                                    'Invalid value.' | trans }}</p>
                            </div>
                            <div class = "uk-form-controls uk-form-controls-text">
                                <v-editor id = "content" name = "content" :value.sync = "newTemplate.content" :options = "{markdown : 'true', height: 250}"></v-editor>
                                <p class = "uk-form-help-block uk-text-danger" v-show = "formTemplates.content.invalid">
                                    {{
                                    'Invalid value.' | trans }}</p>
                            </div>
                            <div class = "uk-form-controls uk-form-controls-text">
                                <span class = "uk-align-right">
                                        <button class = "uk-button" @click.prevent = "add | valid">
                                            {{ 'Add' | trans }}
                                        </button>
                                    </span>
                            </div>
                        </div>
                    </form>
                    {{ data.translations | json }}
                </div>
                    <div class = "uk-alert" v-if = "!data.translations.length">
                        {{ 'You can add your first translation using the input-field. Go ahead!' | trans }}
                    </div>
                {{data.translations | json }}
                    <div class = "uk-form-row" v-for = "translation in data.translations">
                        <span class = "uk-form-label">{{ translation.countrycode | trans }}</span>
                        <div class = "uk-form-controls uk-form-controls-text">
                            <v-editor id = "translation.countrycode" name = "translation.countrycode" :value.sync = "translation.content" :options = "{markdown : 'true', height: 250}"></v-editor>
                        </div>
                        <div class = "uk-form-controls uk-form-controls-text">
                            <span class = "uk-align-right">
                                <button @click = "remove(translation)" class = "uk-button uk-button-danger">
                                    <i class = "uk-icon-remove"></i>
                                </button>
                            </span>
                        </div>

                    </div>
                </div>
            <div class = "uk-form-row uk-margin-top">
                <div class = "uk-form-label">
                    <button class = "uk-button uk-button-primary uk-modal-close">{{ 'Save' | trans }}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    module.exports = {

        section: {
            label: 'Mailing-Template',
            priority: 100
        },

        props: ['data', 'countries'],

        data: function () {
            return {
                newTemplate: {
                    countrycode: '',
                    country: ''
                }
            }
        },

        ready: function () {
            this.tab = UIkit.tab(this.$els.tab, {connect: this.$els.content});
        },

        methods: {
            add: function add(e) {

                e.preventDefault();
                if (!this.newTemplate || !this.newTemplate.countrycode || !this.newTemplate.content) return;

                this.data.translations.push({
                    countrycode: this.newTemplate.countrycode,
                    content: this.newTemplate.content
                });

                this.newTemplate = {
                    countrycode: '',
                    content: ''
                };
            },

            remove: function (template) {
                this.data.translations.$remove(template);
            },

            countryMatch: function (code) {
                return this.data.translations.filter(function (template) {
                            return template.countrycode == code;
                        }).length > 0;
            }

        }
    };

    window.Settings.components['mailing-template'] = module.exports;
</script>

Hi @Chay22 The problem is, that data.translations should be looped and for each translation there should be a new entry in the list on the second tab. Now the data.translations upgrades fine if I add a new translation - but the loop on the second tab does not work. I uploaded a little video to demonstrate as you can see in my post :-) — MyFault
– MyFault, Commented Jun 11, 2016 at 9:00

Mithu A Quayium · Accepted Answer · 2016-06-10 23:01:10Z

2

This should be

<div v-for="template in templates"> {{ template.countrycode }}</div>

instead of :

<div v-for="template in data.templates"> {{ template.countrycode }}</div>

Meaning, you should loop through 'templates' instead of 'data.templates'.

answered Jun 10, 2016 at 23:01

Mithu A Quayium

7746 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MyFault Over a year ago

Hi. No, templates does not exist.

MyFault Over a year ago

I added further information to my post - maybe this helps :-)

Collectives™ on Stack Overflow

VueJS: Loop through JSON-object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related