我想翻译数据中的字符串

Question

我正在翻译我的项目。我将 js/json 翻译成 HTML 但我制作了 v-for 而不是复制 4 个相同的 HTML 代码：

        <div class="col-md-6 col-lg-4">
          <div class="box my-5" v-for="(item, index) in items" :key="index">
            <div class="innerBox">
              <router-link to="/sixthPage">
                <div class="card Fcard d-flex  flex-row justify-content-center align-items-center" style="padding: 1rem 2rem !important">
                  <p>{{item.title}}</p>
                </div>
              </router-link>
              <router-view></router-view>
            </div>
        </div>

我想翻译 {{ item.title }} 但 我没有使用 I18n 插件。 我自己翻译 我问如何翻译 {{ item.title }} 使用 v-for.

import en from "../locales/en.js";
import tr from "../locales/tr.js";
export default {
    el: '#app',
    mixins: [en, tr],

    data () {
        return {
            items: [
                {title: 'Protect Privacy',},
                {title: 'Bypass Censorship',},
                {title: 'Faster Internet'},
                {title: 'I do not want to specify',}
            ],
            lang: window.navigator.language,

        }
    },
    components:{
        Header
    },
    methods: {
        translate(prop) {
            return this[this.lang][prop];
        }
    },

翻译成 HTML 时，用法如下：<h2>{ translate('name') }}</h2>

Answer 1

您可以将 translate 定义为属性计算 returns 翻译项目标题的函数：


 <p>{{translate(item.title)}}</p>

脚本：

    computed: {
        translate() {
            return (prop)=>this[this.lang][prop];
        }
    },

Answer 2

<h1> {{ translate(item.title) }} </h1>
 data(){
     return{
        items[ {title: 'SeventhPageTitle'} ]
      }
    }

我想翻译数据中的字符串

I want to translate strings in data

vue.js

vue-component

vuejs2