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

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

本文关键字：@click 方法 输出 未定义 组件 自定义 js 使用 Vuex Vue      更新时间：2023-09-26

我有一个菜单，除了三个按钮外，还有关于、新闻和联系按钮，这些按钮允许更改菜单按钮上的标签语言和文本元素的内容（变量contentText如下）。

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

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

我错过了什么？

您正在尝试在没有名为 toggleNews 的方法的子组件上调用 toggleNews。 该方法位于父组件上。 您需要将按钮移动到父元素中，或利用事件将点击从子元素广播到父元素。

我将子模板上移到父模板中，您的代码按预期工作：https://jsfiddle.net/674z6w0h/13/

相关文章：