Vue.js 使用 Vuex 和自定义组件，@click 方法输出未定义

Question

除了 about、news 和 contact 按钮外，我还有一个菜单三个按钮，允许更改菜单按钮上的标签语言和文本元素的内容（下面的变量 contentText）。

我正在使用带有自定义组件的 Vue.js，以及 Vuex.js to store language states. I'm being able to select the language of the labels on the menu buttons. For instance, if I click on the button labeled fr, the labels on the meny bar change from about to à propos, news to nouvelles, etc., but for some reason that I cannot identify, when I click any one of the menu buttons, the click event doesn't trigger the visibility of the respective text elements. The code that deals with states is something along the following lines (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/

Vue.js 使用 Vuex 和自定义组件，@click 方法输出未定义

Vue.js with Vuex, and custom components, @click method outputs undefined

javascript

internationalization

vue.js