1

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: '',
    },
  })
}

for visualisation

for visualisation

1 Answer 1

1

You're treating informations[infIndex].values like an array but you've declared it as an object:

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

valIndex is not an actual index number, it's an object key, because you're calling v-for with an object:

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

It would be easiest to just change values to initially be an array, and I would get rid of the value key as well so it's just a simple array of objects:

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: ''
  });
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.