VueJS: Как сделать так, чтобы первый вход выбора формы определял, что показывать во втором входе выбора?

Question

У меня есть форма с двумя выбранными входами.То, что пользователь выбирает на первом входе выбора (product_id), будет определять, какие опции показывать на втором входе выбора.Будучи новичком в JavaScript, я борюсь с тем, как написать логику для этого в моем приложении Vue.

Позвольте мне объяснить ... (также живое демо здесь )

У меня есть два массива данных:

Продукты:

[
  {
    product_id: 1,
    product_name: 'Apple'
  },
  {
    product_id: 2,
    product_name: 'Banana'
  },
  {
    product_id: 3,
    product_name: 'Watermelon'
  },
  {
    product_id: 4,
    product_name: 'Potato'
  }
]

Темы:

[
  {
    product_id: 1,
    subject_name: 'Granny Smith'
  },
  {
    product_id: 1,
    subject_name: 'McIntosh'
  },
  {
    product_id: 2,
    subject_name: 'Cavendish'
  },
  {
    product_id: 3,
    subject_name: 'Jubilee'
  },
  {
    product_id: 3,
    subject_name: 'Black Diamond'
  },
  {
    product_id: 4,
    subject_name: 'Russet'
  },
  {
    product_id: 4,
    subject_name: 'Yukon Gold'
  }
]

Шаблон формы:

<label for="product_select_input">Product:</label>
          <select
            id="product_select_input"
            v-model="form.product"
          >
            <option disabled value="">Select</option>
            <option
              v-for="(product, index) in products"
              :key="index"
              :value="product.product_id"
              >{{ product.product_name }}</option
            >
          </select>

<label for="product_subject_input">Product Subject:</label>
          <select
            id="product_subject_input"
            v-model="form.subject"
          >
            <option disabled value="">Select a Subject</option>
            <option
              v-for="(subject, index) in subjects"
              :key="index"
              :value="subject.subject_id"
              >{{ subject.subject_name }}</option
            >
          </select>

Я думал, что добавлювычисленное свойство с именем showRelatedSubjs и связывание его с @change в исходном выборе продукта, но это не сработало, и я получаю следующую ошибку в консоли: Cannot read property 'product_id' of undefined

computed: {
    showRelatedSubj() {
      if (this.form.product === this.subject.product_id) {
        return this.subjects.filter(subject => subject.includes(this.subject_name))
      } else {
        return ''
      }
    }
  }

У кого-нибудь есть какие-либо советыили решения?Спасибо.

Моя живая демоверсия доступна здесь

Answer 1

Несколько вопросов:

1. Объекты в subjects содержат product_id с, но ваш v-model связан с subject.subject_id (не существует).

2. Название вашего вычисленного свойства предполагает намерение вернуть связанные предметы на основе выбранного продукта. Это должно быть сделано только с filter() следующим образом:

showRelatedSubj() {
  return this.subjects.filter(
    subject => this.form.product === subject.product_id
  );
}

обновленные коды и окна