我想在数据中转换字符串。

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 .翻译。

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

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

Answer 2

可以将translate定义为计算属性，该属性返回转换项标题的函数：

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

剧本：

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