Vue.js中向共享按钮组件传递动态文本值

问题根源 #

你在Button组件的:text props绑定中错误使用了插值语法{{}}——Vue的v-bind（即:xxx）语法后需直接写JavaScript表达式，不能用{{}}包裹，这是导致报错的核心原因。而模板内容区域（比如<p>标签内）才需要用{{}}做插值。

修正代码 #

将所有Button组件的:text绑定修改为如下形式：

<Button 
  @on-click="currentStep = 1"
  :text="getTranslation('intro_modal_persona_select_button_next')"  
  bgColor="transparent"
  txtColor="#d64ba1"
/>

其他Button组件的:text绑定同理，直接去掉{{}}，用引号包裹方法调用表达式即可。

额外优化建议 #

1. 简化模板写法：Vue模板中调用组件方法时无需加this.，直接写getTranslation(...)即可，冗余的this.虽不报错但没必要。
2. 确保翻译响应式更新：你的TranslationService仅返回翻译数据数组，需在组件中实现getTranslation时依赖响应式的selectedLanguage变量，确保切换语言时翻译内容自动更新。示例实现：

import TranslationService from './translation.service'

export default {
  data() {
    return {
      selectedLanguage: 'en',
      translations: []
    }
  },
  async mounted() {
    this.translations = await TranslationService.loadTranslations()
  },
  methods: {
    getTranslation(key) {
      const match = this.translations.find(item => item.key === key)
      return match ? match[this.selectedLanguage] : key
    }
  }
}

内容的提问来源于stack exchange，提问作者Appu