Vuejs2 VueJS：如何让第一个表单选择输入决定在第二个选择输入中显示什么？

我有一个有两个选择输入的表单。用户在第一个选择输入（

product\u id

）中选择的内容将决定在第二个选择输入中显示哪些选项。作为JavaScript的新手，我正在为如何在我的Vue应用程序中为此编写逻辑而苦苦挣扎

让我解释一下……（同时）

我有两个数据阵列：

产品：

主题：

表单模板：

有人有什么建议或解决办法吗？多谢各位

我的生活

一些问题：

subject

中的对象包含

product\u id

s，但是您的

v-model

绑定到

subject.subject\u id

（不存在）

计算属性的名称表明其意图是基于所选产品返回相关主题。这应该只使用

过滤器（）

完成，如下所示：

showRelatedSubc（）{
返回此.subjects.filter(
subject=>this.form.product===subject.product\u id
);
}

几个问题：

subject

中的对象包含

product\u id

s，但是您的

v-model

绑定到

subject.subject\u id

（不存在）

计算属性的名称表明其意图是基于所选产品返回相关主题。这应该只使用

过滤器（）

完成，如下所示：

showRelatedSubc（）{
返回此.subjects.filter(
subject=>this.form.product===subject.product\u id
);
}

---

应该是

这个.form.subject.product\u id

因为

v-model

绑定到

form.subject

。应该是

这个.form.subject.product\u id

因为

v-model

绑定到

form.subject

。

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

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