Как заполнить мультиязычный массив с ключами локлей VUE3

Рейтинг: 0Ответов: 1Опубликовано: 28.04.2023

Доброе время суток, очень прошу вашей помощи, необходимо заполнить массив с данными, где ключ является локалью. Делаю собственно все как описано ниже, но получаю логичную ошибку ReferenceError: locale is not defined... Это мой первый проект на VUE да еще и с мультиязычными данными которые я должен отправить на сервер, очень прошу вашей помощи или идей как это можно реализовать иначе.

<script setup>
import { ref } from 'vue'

const locales = ['ru', 'en']

const article = ref({
    id: '',
  translations: {
    [locale]: {
      name: '',
      content: '',
      meta_h1: '',
      meta_description: '',
      slug: '',
    },
  },
    image: null,
})
</script>

<template>
    <div v-for="(locale, index) in locales" :key="index">
        <v-input
            v-model="article.translations[locale].name"
            name="name"
            label="Name"
        />
    </div>
</template>
javascript vue.js vue3
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Конечно locale он не знает. Вы же его не определили, и в изначальный объект положили. На его месте судя по всему и должны быть ru или en.

<script setup>
    import { ref } from 'vue'
    
    const locales = ['ru', 'en'];
    const article = ref({
      id: '',
      translations: {
        "ru": {
          name: 'Russian',
          content: '',
          meta_h1: '',
          meta_description: '',
          slug: '',
        },
        "en": {
          name: 'English',
          content: '',
          meta_h1: '',
          meta_description: '',
          slug: '',
        },
      },
      image: null,
    })
    </script>
    
    <template>
      <div v-for="(locale, index) in locales" :key="index">
        <input
          v-model="article.translations[locale].name"
          name="name"
          label="Name"
        />
      </div>
    </template>