I want to create an array of informations. Each information contains an object as a title with 3 different languages and multiple values, where each value also contains 3 different languages.
With the help of this question, I've managed to add multiple informations with their own title and their first value. However, I have problems adding more values to each information. So we are looking at the addValue() function. Here I want to add the new value object in informations[infIndex].values, but I really have no idea how to do it. With push() or slice() I get 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>
Script setup
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: '',
},
})
}

