Я хочу создать массив информации. Каждая информация содержит объект в виде заголовка с 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: '',
},
})
}
Вы обращаетесь с 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: ''
});
}