Vue中给嵌套数组添加多语言值项报错，求助解决addValue函数问题

我想要创建一个informations数组，每个元素包含一个带三种语言（EN、FR、DE）的title对象，以及多个同样带三种语言的value。目前已实现添加多个带标题和首个值的information，但无法为每个information添加更多值。调用addValue()函数时出现错误：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: '',
    },
  })
}

报错原因很明确：informations[infIndex].values是对象类型，而splice/slice是数组的专属方法，对象没有这些方法，所以会报错。你需要把values从对象改成数组，才能实现多值的添加和遍历。

修改步骤： #

1. 初始化和添加information时，将values改为数组
   原来的values: { value: {...} }要改成values: [{ en: '', fr: '', de: '' }]，直接存储语言对象的数组，不需要额外嵌套value键。

2. 调整addValue函数逻辑
   现在values是数组，直接用push或者splice添加新的语言对象即可。

3. 模板中简化v-for的遍历逻辑
   因为values现在是数组，直接遍历information.values即可，不需要再通过索引访问。

修改后的完整代码： #

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 information.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: [
      { en: '', fr: '', de: '' }
    ],
  },
])

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

function addValue(infIndex, valIndex) {
  // 在当前点击的value后面插入新值
  informations[infIndex].values.splice(valIndex + 1, 0, {
    en: '',
    fr: '',
    de: '',
  })
  // 若只需添加到数组末尾，可直接用push：
  // informations[infIndex].values.push({ en: '', fr: '', de: '' })
}

说明 #

• 把values改成数组后，就能正常使用数组的splice/push方法添加新值。
• 模板中遍历information.values更直观，避免不必要的索引访问。
• addValue里的splice(valIndex + 1, 0, ...)是为了在当前点击的value后方插入新值，按需选择即可。

内容的提问来源于stack exchange，提问作者Philippe