I am interested in structuring an array of information. Each piece of information includes a title object with translations in 3 different languages, along with multiple values that are also multilingual.
While referencing this question, I successfully implemented the ability to add multiple pieces of information with their respective titles and initial values. However, I am encountering difficulties when trying to add additional values to each information entry. Specifically, my struggle lies with the addValue() function. I intend to insert a new value object within informations[infIndex].values, but I am unsure about the correct approach. When using push() or slice(), I receive an error stating
informations[infIndex].values.slice is not a functionHTML
<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: '',
},
})
}