javascript - VueJS: Loop through JSON-object -
i use json , loop through each items using vuejs' v-for.
i'm using array store translations of dataset. translations located in data.translations.
but happens: http://d.pr.it/1k1yb
this source code of template:
<!--suppress --> <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 first translation using 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>
this should
<div v-for="template in templates"> {{ template.countrycode }}</div> instead of :
<div v-for="template in data.templates"> {{ template.countrycode }}</div> meaning, should loop through 'templates' instead of 'data.templates'.
Comments
Post a Comment