VueJS：循环访问JSON对象

Question

我想使用这个JSON并使用VueJS＆＃39;循环遍历每个项目。 v-for。

我使用数组来存储数据集的翻译。翻译位于data.translations。

但是会发生这种情况：http://d.pr.it/1k1Yb

这是我的模板源代码：

<!--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>

Answer 1

这应该是

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

而不是：

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

意思是，你应该遍历'templates'而不是'data.templates'。

Answer 2

编辑：我的回答是僵尸，因为我错过了一段重要的OP代码。