Vuejs 3使用i18n翻译内“脚本设置>

Laravel + Inertiajs + Vue 3
我使用Quasar框架，所以在一个vue文件中我有一个Quasar表。现在我需要翻译列标签。

<template>
    <head title="Elenco utenti"></head>

    <AuthenticatedLayout>
        <template #header>
          <div>
            <q-toolbar class="q-gutter-sm">
              <Link :href="route('list-utenti')" type="button" class="float-right"><q-btn flat round dense icon="people" /></Link>
              <div class="text-subtitle1">{{ $t('utenti.pagetitle')}}</div>
            </q-toolbar>
          </div>
        </template>

        <div class="q-py-md q-gutter-sm">
          <Link :href="route('register')" type="button" class="float-right"><q-btn icon="add_box" color="white" text-color="text-grey-7" :label="$t('utenti.btn_new')"></q-btn></Link>
        </div>
        <div class="q-py-xl">
          <q-table
            title=""
            :rows="users"
            :columns="columns"
            row-key="id"
          >
            <template v-slot:body-cell-actions="props">
              <q-td :props="props">
                <q-btn icon="mode_edit" @click="onEdit(props.row)"></q-btn>
                <q-btn icon="person_off" @click="onDelete(props.row)"></q-btn>
              </q-td>
            </template>
            <template v-slot:body-cell-email="props">
              <q-td :props="props">
                <strong>{{ props.value }} </strong>
              </q-td>
            </template>          
          </q-table>
        </div>
    </AuthenticatedLayout>
</template>

字符串
正如你在模板代码中看到的，我配置了i18 n，我可以在模板中正确地翻译{{ $t（'utenti. pagetitle'）}}。
这是剧本部分

<script setup>
  import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
  import { Inertia } from '@inertiajs/inertia';
  import { Link } from '@inertiajs/inertia-vue3';
  import { computed, ref} from '@vue/reactivity';
  import { Quasar, useQuasar } from 'quasar';

  const props = defineProps({
      page_description : String,
      title: String,
      numero_record: Number,
      users: Array
  });

  const columns = [
    {
      name: 'id',
      required: true,
      label: 'id',
      align: 'left',
      field: row => row.id,
      format: val => `${val}`,
      sortable: false
    },
    { name: 'name', align: 'left', label: translated_name, field: 'name', sortable: true},
    { name: 'email', align: 'left', label: 'e-mail', field: 'email', sortable: false},
    { name: 'ruolo', align: 'left', label: 'ruolo', field: 'ruolo', sortable: true},
    { name: 'listino_grossista_visible', align: 'center', label: 'list. grossista', field: 'listino_grossista_visible', sortable: true},
    { name: 'enabled', align: 'center', label: 'Attivo', field: 'enabled', sortable: true},
    { name: 'actions', align: 'center', label: 'Azioni'}
  ]

  const onEdit = (row) => {
    Inertia.post(route('edit-utente'),
      { row } ,
      { onBefore: () => confirm('Vuoi veramente modificarlo?')}
    )
  }

  const onDelete = (row) => {
    alert('DELETE ' + row.email);
  }
</script>

型
我想以某种方式使用$t来获得网格列标签的正确翻译（例如'translated_name'，但我不明白我如何才能做到这一点，因为它是在脚本部分，我不能使用相同的模板。
我可能知道我需要添加一些计算属性，但我没有完全弄清楚如何。假设我使用的是composition API。

const translated_name = computed(() =>  {
    return $t('utenti.nome')
  })

型
我也检查了这个链接Vue-i18n not translating inside component script tags，但我不明白如何适应我的情况。
亲切的问候，马特

我遇到了同样的问题，并像这样修复了它：

import { QTableColumn } from 'quasar';
import { useI18n } from 'vue-i18n';
const { t } = useI18n(({ useScope: 'global' })); //global since my language switch is in another component.

const columns = 
computed<QTableColumn[]>(() => [{
  name: 'object_id',
  align: 'left',
  label: t('table_id'),
  field: row => row.id,
  sortable: true
}, {
  name: 'object_name',
  align: 'left',
  label: t('table_name'),
  field: row => row.name,
  sortable: true
}]);

字符串
我在:columns: 'columns'上遇到了一些问题，导致了一个类型错误。
因此，它是一个类型化的computed：https://vuejs.org/guide/typescript/composition-api.html#typing-computed
对于可搜索性，如果未键入computed，则会出现以下错误：
The expected type comes from property 'columns' which is declared here on type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & QTableProps & Record<string, unknown>'个

Vuejs 3使用i18n翻译内“脚本设置>

1条答案

相关问题

热门标签

最新问答