Как интегрировать vuei18n в vuetify? - PullRequest
Новая
       36

Как интегрировать vuei18n в vuetify?

0 голосов
/ 28 февраля 2019

У меня есть этот кодовый код здесь

https://codepen.io/anon/pen/OqyqaP

от меня, пытающегося интегрировать vuei18n в vuetify.Однако это не работает.Должно быть написано Element per sida: в правом нижнем углу таблицы, поскольку я установил значение sv.

Кто-нибудь знает, что не так?

https://vuetifyjs.com/en/framework/internationalization

Спасибо

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css">

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

    </head>
    <body>

      <div id="app">
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>
    </div>
    </body>
</html>

js 

// Ready translated locale messages
const messages = {
  en: {
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Items per page:',
        pageText: '{0}-{1} of {2}'
      }
    },
  },
  sv: {
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Element per sida:',
        pageText: '{0}-{1} av {2}'
      }
    },
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'sv', // set locale
  messages, // set locale messages
})


// Create a Vue instance with `i18n` option
new Vue({ 
  data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' }
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]
      }
    },
  VueI18n : VueI18n,
  Vuetify : {
      lang: {
        t: (key, ...params) => i18n.t(key, params)
      }
  },
  created : function() {
    this.$vuetify.lang.current = 'sv';
  }
}).$mount('#app')

// Now the app has started!

1 Ответ

0 голосов
/ 01 марта 2019

Я еще не тестировал, но:

Я почти уверен, что в случае простого браузера js включает (т.е. codepen) происходит следующее: 

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Vuetify)
}

vuetify / src / index.ts # L19

Поэтому, когда вы пытаетесь предоставить опции, Vuetify уже установлен с параметрами по умолчанию.И при последовательном использовании, если Vue.use не переустановит плагин.

РЕДАКТИРОВАТЬ: что я считаю ошибкой / проблемой в Vuetify

...