【Vue】vue-i18n 怎么用在data属性上

Z时代
2024-01-10
分类：技术分享

https://github.com/kazupon/vu...

html中可以这么用

<p>{{ $t("message.hello") }}</p>

那怎么赋给变量呢？

    data () {
return {
value: "$t('allQuestion')" //无效
}}

回答

可以使用 this.$t。刚在文档中添加了相关的用法——vue-i18n/blob/dev/gitbook/started.md" rel="nofollow noreferrer">https://github.com/kazupon/vu...，估计 gitbook 一两天就会重新编译，到时候可以直接到官方文档网站查看了。

var vm = new Vue({
  data() {
    return {
      a: this.$t('a')
    }
  }})

示例：https://jsfiddle.net/hr2aksy9/6/

遇到同样的方法，已解决，只是不知道好不好：
用computed绑定数据:

// html
 <li v-for="(item, index) in stepLists">
    <img :src="https://segmentfault.com/q/1010000008112978/item.img" alt="">
    <div class="img-cover">
        <div class="step-title">{{$t('lang.step')}} {{index + 1}}</div>
        <div class="step-dec">
            {{item.stepDec}}
        </div>
    </div>
</li>
//js
computed: {
    stepLists() {
        return [
            {
                img: require('../assets/img/home/step1_pic.png'),
                stepDec: this.$t('lang.homePage.stepLists[0]')
            },
            {
                img: require('../assets/img/home/step2_pic.png'),
                stepDec: this.$t('lang.homePage.stepLists[1]')
            }
        ]
    }},