Javascript TypeError:无法读取属性'；指数'；连续v-FOR上的空VueJ

这个问题我已经讨论了好几个小时了。我正在使用vuejs的v-for为我的

元素渲染

上的项目，渲染时它给了我类型错误。我尝试更改：key值，但仍然有相同的错误，并且不会呈现所需的项

我在哪里犯了错误

代码如下：

这是我的第一个标签：

<vs-select placeholder="Gender"
      v-model="gender"
      color="#ffc640"
      class="col-span-2 mt-2 z-0"
      >
        <vs-option v-for="(gender, index) in $store.state.genders"
        :key="`${index}_gender`"
        :label="gender.label" :value="gender.name">
          {{ gender.label }}
        </vs-option>
    </vs-select>

<vs-select placeholder="Attainment"
      v-model="attainment"
      color="#ffc640"
      class="col-span-2 mt-2 z-0"
      >
        <vs-option v-for="(attainment, index) in $store.state.attainment"
        :key="`${index}_attainment`"
        :label="attainment.label" :value="attainment.name">
          {{ attainment.label }}
        </vs-option>
    </vs-select>

],

],

以下是我的计算值：

attainment: {
  get() {
    return this.$store.state.user.attainment;
  },
  set(value) {
    this.$store.commit('setAttainment', value);
  },
},

gender: {
  get() {
    return this.$store.state.user.gender;
  },
  set(value) {
    this.$store.commit('setGender', value);
  },
},

---

Computed是根据状态返回值的函数。不能在v-model指令中使用它们（但“：value”是正确的）。读取存储状态也是被禁止的，您应该使用getter。 您的代码可以是这样的（删除Computed）：

{{gender.label}

总之，它不干净。修改存储以使用getter、侦听@input并提交数据更改

 attainment: [
{
  name: 'high_school',
  label: 'High School',
  value: 'high_school',
},
{
  name: 'senior_high_school',
  label: 'Senior High School',
  value: 'senior_high_school',
},
{
  name: 'associate',
  label: 'Associate',
  value: 'associate',
},
{
  name: 'bachelor',
  label: 'Bachelor',
  value: 'bachelor',
},
{
  name: 'master',
  label: 'Master',
  value: 'master',
},
{
  name: 'doctorate',
  label: 'Doctorate',
  value: 'doctorate',
},

attainment: {
  get() {
    return this.$store.state.user.attainment;
  },
  set(value) {
    this.$store.commit('setAttainment', value);
  },
},

gender: {
  get() {
    return this.$store.state.user.gender;
  },
  set(value) {
    this.$store.commit('setGender', value);
  },
},

<vs-select placeholder="Gender"
      :value="$store.state.user.gender"
      @input="$store.commit('setGender', $event)"
      color="#ffc640"
      class="col-span-2 mt-2 z-0"
      >
        <vs-option v-for="(gender, index) in $store.state.genders"
        :key="`${index}_gender`"
        :label="gender.label" :value="gender.name">
          {{ gender.label }}
        </vs-option>
    </vs-select>