我想翻译数据中的字符串

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插件。我自己翻译我问如何使用v-for翻译{{ item.title }}。

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 定义为计算属性，该属性返回一个翻译项目标题的函数：

 <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'} ]
      }
    }