JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n"></script>
<div id="app">
  <p>
    Not working:
  </p>
  
  <ul>
    <li v-for="(item, index) in $i18n.t('items')" :key="index">
      {{ item }}
    </li>
  </ul>
  
  <hr>
  
  <p>
    Working:
  </p>
  
  <ul>
    <li v-for="(_, index) in $i18n.t('items')" :key="index">
      {{ $i18n.t(`items.${index}`) }}
    </li>
  </ul>
</div>

JavaScript

const i18n = new VueI18n({
  locale: "en-US",
  messages: {
    'en-US': {
			type: 'gift card',
      items: [
      	'I want this @:(type)',
        'She does not want it',
        'But they also want @:(type)'
      ] 
    },
  },
  missing: (locale, key, vm) => {
    console.log(`missing ${key}`)
  },
});

new Vue({
    el: '#app',
    i18n,
    data: {
    },
    mounted () {
    },
    methods: {
    }
})