與Vuex Vue.js，和自定義組件，@單擊方法輸出不確定

Question

我有一個菜單，約，新聞和接觸除了三個按鈕按鈕，允許更改標籤的語言在菜單上的按鈕和文本元素的內容（變量contentText下面）。

我使用Vue.js與定製組件，以及Vuex.js存儲語言狀態。我可以選擇菜單按鈕上的標籤語言。舉例來說，如果我點擊標記FR按鈕，標籤上MENY欄的變化從約至àpropos，新聞到新生力量等，但由於某些原因，我不能確定，當我點擊任何一個菜單按鈕時，點擊事件不會觸發各個文本元素的可見性。與美國打交道的代碼是大意如下的東西（的jsfiddle here）：

Vue.use(Vuex) 
var storelang = new Vuex.Store({ 
    state: { 
    lang: {} 
    }, 
    actions: { 
    lang: 'code' 
    }, 
    mutations: { 
    code(state, ln) { 
     var jsontext = '{"aboutMenu":"About", "aboutText":"This is just a small text in English.", "newsMenu":"News", "newsText":"News written in the English language.", "contactMenu":"Contact", "contactText":"Contact info written in English."}' 
     if (ln === 'pt') { 
     jsontext = '{"aboutMenu":"Sobre", "aboutText":"Isto é um pequeno texto em Português.", "newsMenu":"Novidades", "newsText":"Novidades escritas em Português.", "contactMenu":"Contactar", "contactText":"Informação de contacto escrita em Português."}' 
     } 
     if (ln === 'fr') { 
     jsontext = '{"aboutMenu":"À propos", "aboutText":"Ceci est juste um petit texte en Français.", "newsMenu":"Nouvelles", "newsText":"Des nouvelles écrites en Français.", "contactMenu":"Contacter", "contactText":"Des informations dans la langue Française."}' 
     } 
     state.lang = JSON.parse(jsontext) 
    } 
    }, 
    strict: true 
}) 

各自的模板的成分，具有Vue.extend創建：

var contentBtn = Vue.extend({ 
    template: '<button type="button" class="btn btn-default" @click="toggleAbout">{{lang.aboutMenu}}</button><button type="button" class="btn btn-default" @click="toggleNews">{{lang.newsMenu}}</button><button type="button" class="btn btn-default" @click="toggleContact">{{lang.contactMenu}}</button>' 
}) 

var contentTxt = Vue.extend({ 
    template: '<div v-show="aboutIsVisible">{{lang.aboutText}}</div><div v-show="newsIsVisible">{{lang.newsText}}</div><div v-show="contactIsVisible">{{lang.contactText}}</div>' 
}) 

var langBtn = Vue.extend({ 
    template: '<button type="button" class="btn btn-info" @click.prevent=activate("en")>en</button><button type="button" class="btn btn-info" @click.prevent=activate("pt")>pt</button><button type="button" class="btn btn-info" @click.prevent=activate("fr")>fr</button>', 
    methods: { 
    activate: function(x) { 
     storelang.actions.lang(x) 
    } 
    }, 
    ready: function() { 
    return storelang.actions.lang('en') //default language 
    } 
}) 

而且我Vue例如，在我店有關文本元素可見性的值，註冊組件並聲明單擊事件的方法：

new Vue({ 
    el: '#app', 
    data: { 
    aboutIsVisible: true, 
    newsIsVisible: true, 
    contactIsVisible: true 
    }, 
    components: { 
    'langbtn': langBtn, 
    'contentbtn': contentBtn, 
    'contenttxt': contentTxt 
    }, 
    methods: { 
    toggleAbout: function() { 
     this.aboutIsVisible = !this.aboutIsVisible 
    }, 
    toggleNews: function() { 
     this.newsIsVisible = !this.newsIsVisible 
    }, 
    toggleContact: function() { 
     this.contactIsVisible = !this.contactIsVisible 
    } 
    } 
}) 

我錯過了什麼？

Answer 1

您試圖在沒有方法toggleNews的子組件上調用toggleNews。該方法在父組件上。您需要將按鈕移動到父元素中，或者利用事件來廣播從子元素到父元素的點擊次數。

我感動的子模板成的父母和你的代碼工作正常：https://jsfiddle.net/674z6w0h/13/