Javascript VueJS：循环通过JSON对象

我想使用这个JSON并使用VueJS'

v-for

循环遍历每个项目

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

数据中。翻译

但事实就是这样：

这是我的模板源代码：

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


{{data.type | trans}}
英国标签v-el:tab>
{{‘新翻译’|翻译}
{{‘编辑翻译’|翻译}

{{国家}

{{
“无效值。”| trans}

{{
“无效值。”| trans}
{{'Add'| trans}}
{{data.translations}json}
{{'您可以使用输入字段添加第一个翻译。继续！| trans}}
{{data.translations}json}
{{translation.countrycode | trans}}
{{'Save'| trans}}
module.exports={
第节：{
标签：“邮件模板”，
优先权：100
},
道具：[“数据”，“国家]，
数据：函数（）{
返回{
新模板：{
国家代码：“”，
国家：''
}
}
},
就绪：函数（）{
this.tab=UIkit.tab（this.$els.tab，{connect:this.$els.content}）；
},
方法：{
添加：功能添加（e）{
e、 预防默认值（）；
如果（！this.newTemplate | | |！this.newTemplate.countrycode | |！this.newTemplate.content）返回；
这个是.data.translations.push({
countrycode:this.newTemplate.countrycode，
内容：this.newTemplate.content
});
this.newTemplate={
国家代码：“”，
内容：“”
};
},
删除：函数（模板）{
this.data.translations.$remove（模板）；
},
countryMatch:函数（代码）{
返回此.data.translations.filter（函数（模板）{
返回模板.countrycode==代码；
}).长度>0；
}
}
};
window.Settings.components['mailing-template']=module.exports；
这应该是

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

{{template.countrycode}

而不是：

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

{{template.countrycode}

也就是说，您应该循环使用“模板”而不是“data.templates”。
Hi。不，
模板
不存在。我在我的帖子中添加了进一步的信息-也许这有帮助：-）我看不出你遇到了什么样的错误。问题是，data.translations应该循环，并且对于每个翻译，在第二个选项卡的列表中应该有一个新条目。现在，如果我添加一个新的翻译，data.translations可以升级，但是第二个选项卡上的循环不起作用。我上传了一段视频来演示，你可以在我的帖子中看到：-）