Javascript 带有Vuex和自定义组件的Vue.js，@click方法输出未定义

我有一个菜单，除了三个按钮外，还有大约、新闻和联系人按钮，它们允许更改菜单按钮上标签的语言和文本元素的内容（下面的变量

contentText

）

我正在使用带有自定义组件的Vue.js，以及来存储语言状态。我可以在菜单按钮上选择标签的语言。例如，如果我单击标签为fr的按钮，菜单栏上的标签将从“大约”变为“建议”，从“新闻”变为“新”，等等，但由于某种原因，我无法识别，当我单击任何一个菜单按钮时，单击事件不会触发相应文本元素的可见性。处理状态的代码大致如下（JSFIDLE）：

使用

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
  }
})

---

我遗漏了什么？

您试图对一个子组件调用

toggleNews

，该子组件没有名为

toggleNews

的方法。该方法位于父组件上。您需要将按钮移动到父元素中，或者利用事件将单击从子元素广播到父元素

---

我将子模板向上移动到父模板中，您的代码按预期工作：

当然就是这样！非常感谢（再次）：-）没问题！如果您一次只想看到一个选项卡，那么它就是这样的：这绝对是太棒了！我刚才想试着把它修好，但没那么快

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
  }
})

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
    }
  }
})