Vuejs2 基于HTML动态选择下拉菜单值复选框

我有一个带有HTML复选框和两个下拉/选择菜单的表单。如果我选中复选框，它应该在下拉菜单中动态选择值

不幸的是，我很难让它工作，因为我似乎必须手动选择值，使它们出现

如果您勾选了Top Rated框，它应该动态选择西瓜产品和黑钻石作为产品主题

沙箱：

任何提示和建议都将不胜感激

PostForm.vue

---

您可以将更改事件侦听器添加到输入复选框中，并为该事件设置方法

<select :disabled="select_disabled" v-if="form.topRated" id="product_select_input" v-model="form.product_id">
        <option value="3">Watermelon</option>
      </select>

在数据中定义select_disabled，最初将其设置为false。 并将其添加到您的select_top_rated方法中

---

那很有帮助，谢谢！快速提问，您知道我如何禁用选择，以便用户无法选择其他产品和主题价值吗？

  <input @change="select_top_rated()" type="checkbox" v-model="form.topRated"> 


select_top_rated() {
      if (this.form.topRated){
      this.form.product_id = 3
      this.form.subject_id = 5
      } else{
        this.form.product_id = null
        this.form.subject_id = null
      }
    }

<select :disabled="select_disabled" v-if="form.topRated" id="product_select_input" v-model="form.product_id">
        <option value="3">Watermelon</option>
      </select>

this.select_disabled = true