Добавить несколько входов во вложенный массив

Я хочу создать массив информации. Каждая информация содержит объект в виде заголовка с 3 разными языками и несколькими значениями, где каждое значение также содержит 3 разных языка.

С помощью этого вопроса мне удалось добавить несколько сведений с собственным заголовком и их первым значением. Однако у меня возникают проблемы с добавлением дополнительных значений к каждой информации. Итак, мы рассматриваем функцию addValue(). Здесь я хочу добавить новый объект значения в informations[infIndex].values, но я действительно понятия не имею, как это сделать. С push() или slice() я получаю informations[infIndex].values.slice is not a function.

HTML

    <div class = "informations">
      <h1>Informations</h1>
      <div v-for = "(information, infIndex) in informations" :key = "infIndex">
        <p>Title</p>
        <input v-model = "information.title.en" placeholder = "EN" />
        <input v-model = "information.title.fr" placeholder = "FR" />
        <input v-model = "information.title.de" placeholder = "DE" />

        <div
          v-for = "(value, valIndex) in informations[infIndex].values"
          :key = "valIndex"
        >
          <p>Values</p>
          <input v-model = "value.en" placeholder = "EN" />
          <input v-model = "value.fr" placeholder = "FR" />
          <input v-model = "value.de" placeholder = "DE" />
          <button @click = "addValue(infIndex, valIndex)">Add Value</button>
        </div>
      </div>
      <button @click = "addInformation()">Add Information</button>
      <pre>{{ informations }}</pre>
    </div>

Настройка скрипта

const informations = reactive([
  {
    title: {
      en: '',
      fr: '',
      de: '',
    },
    values: {
      value: {
        en: '',
        fr: '',
        de: '',
      },
    },
  },
])

function addInformation() {
  informations.push({
    title: {
      en: '',
      fr: '',
      de: '',
    },
    values: {
      value: {
        en: '',
        fr: '',
        de: '',
      },
    },
  })
}

function addValue(infIndex, valIndex) {
  informations[infIndex].values.splice(valIndex, 0, {
    value: {
      en: '',
      fr: '',
      de: '',
    },
  })
}

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы обращаетесь с informations[infIndex].values как с массивом, но объявили его как объект:

values: {
      value: {
        en: '',
        fr: '',
        de: '',
      },
    },

valIndex — это не фактический номер индекса, это ключ объекта, потому что вы вызываете v-for с объектом:

<div
  v-for = "(value, valIndex) in informations[infIndex].values"
  :key = "valIndex"
>

Было бы проще просто изменить values, чтобы он изначально был массивом, и я бы также избавился от ключа value, чтобы это был просто массив объектов:

const informations = reactive([
  {
    title: {
      en: '',
      fr: '',
      de: ''
    },
    values: [
      {
        en: '',
        fr: '',
        de: ''
      }
    ]
  }
]);

function addInformation() {
  informations.push({
    title: {
      en: '',
      fr: '',
      de: ''
    },
    values: [
      {
        en: '',
        fr: '',
        de: ''
      }
    ]
  });
}

function addValue(infIndex) {
  informations[infIndex].values.push({
    en: '',
    fr: '',
    de: ''
  });
}

Другие вопросы по теме