Hice esta función auxiliar para traducir la columna adecuada de la base de datos (MySQL). La base de datos es así.
Id name_en name_fr name_de 1 Car Auto Auto 2 Plane Avion EbeneMi función auxiliar es así ...
import { Inertia } from "@inertiajs/inertia"; export default function translate(array, column) { let locale = Inertia.page.props.locale; let value = array[column + '_' + locale]; return value ?? 'Missing Translation'; }En mi componente llamo a esta función así y funciona bien.
<script setup> import translate from "@/Helpers/translateFromDb"; defineProps({ object: { type: Object, }, }); </script> <template> <ul class="flex justify-start space-x-6"> <li v-for="item in object" :key="item.id"> {{ translate(item, "name") }} </li> </ul> </template> <style scoped> </style>¿Hay alguna forma de importar esta función auxiliar globalmente en lugar de llamarla en cada componente?
EDITAR: Sí, sé que se podría obtener el mismo resultado usando un Rasgo en ObjectResource, pero estoy aprendiendo Vue y estaba buscando hacer esto con él.