Блог

У меня эта проблема уже несколько часов. Я отображаю элементы <options> для своего <select> элемента, используя v-for vuejs, и когда он отображался, он выдавал мне ошибку типа. Я попытался изменить свои: key значения, но по-прежнему с той же ошибкой и не буду отображать нужные мне элементы.

Где я допустил ошибку?

Код ниже:

Это мой первый <select> тег:

 <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>
  

Вот следующий <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>
  

Вот ошибка:

Для контекста, вот объекты

 genders: [
{
  name: 'male',
  label: 'Man',
  value: '1-male',
},
{
  name: 'female',
  label: 'Woman',
  value: '2-female',
},
{
  name: 'lgbtq',
  label: 'Transgender',
  value: '3-lgbtq',
},
{
  name: 'nottosay',
  label: 'Prefer not to say',
  value: '4-nottosay',
},
  

],

  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);
  },
},
  

Вычисляются функции, которые возвращают значение в соответствии с состоянием. Вы не можете использовать их в директивах v-model (но ‘: 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>
  

В любом случае, это не чисто. Пересмотрите свое хранилище, чтобы использовать методы получения, прослушивать @input и фиксировать изменения данных.