Ad

VueJS Parent/child Communication - Localization

- 1 answer

I'm working on a localized application, in which the root component retrieves all available locales which can be used throughout the app. On getting the locales it will broadcast this data.

My child components have some issue working with these locales. I made a small fiddle showing some/most of my issues: https://jsfiddle.net/718thn9o/ (the child template is pretty much the same as parent - sorry for this ugly formatting)

VueJS code (can be seen on the jsfiddle link)

var Child = Vue.extend({
    data : {
    selectedLanguage : '',
    locales : [],
    someObject : {
      someValue : {}
    }
  },
  template: '<article><h3>[Child] - strange behaviour:</h3><select v-model="selectedLanguage"><option  v-for="locale in locales" v-bind:value="locale.locale">{{locale.display_name}}</option></select><br /><inpu_name}}</option></select><br /><input v-model="someObject.someValue[selectedLanguage]"/><br /><div v-for="locale in locales">{{ locale.display_name}} : {{someObject.someValue[locale.locale]}}</div></article>',
  events: {
    set_locales : function(data) {
        this.locales = data;
      this.selectedLanguage = data[0]['locale'];
  }
}
});

var vm = new Vue({
    el: '#app',
    data: {
        selectedLanguage: 'nl-NL',
        locales : [
        {
            locale: 'nl-NL',
            display_name: 'Nederlands'
        },
        {
           locale: 'en-NL',
           display_name: 'English'
        }],
        someObject : {
            someValue : {}
         },
     },
     ready : function(){
        this.$broadcast('set_locales', this.locales);
     },

     components : {
        'my-component': Child
     },
})

It seems as if the data I'm broadcasting does not work reactive properly, but I can't figure out what it is. In the example given the Parent (root) works as expected, but the child only slightly works after user filled out some data. And even after filling out it does not work properly (no value switch on language select)

Probably, I've skipped an important section in the manual. If anyone can show me what I'm doing wrong here I'd most appreciate it.

Ad

Answer

I shouldn't have used broadcast but props on my child component. Got it working now.

Ad
source: stackoverflow.com
Ad