Dynamically select dropdown menu values based on HTML checkbox - vuejs2

Question

I have a form with an HTML checkbox and two dropdown/select menus. If I check the checkbox, it should dynamically select values in the dropdown menus.
Unfortunately, I am having trouble getting this to work as it seems I have to manually select the values to make them appear.
If you check the box for "Top Rated", it should dynamically select Watermelon product and Black Diamond as the product subject.
Sandbox here: https://codesandbox.io/embed/restrict-values-on-toggle-mxiq3
Any tips and advice would be greatly appreciated
PostForm.vue
<template>
<div>
<form>
<input type="checkbox" v-model="form.topRated"> Top Rated
<br>
<br>
<label for="product_select_input">Product:</label>
<select v-if="form.topRated" id="product_select_input" v-model="form.product_id">
<option value="3">Watermelon</option>
</select>
<select v-if="form.topRated==false" id="product_select_input" v-model="form.product_id">
<option disabled value>Select</option>
<option
v-for="(product, index) in products"
:key="index"
:value="product.product_id"
>{{ product.product_name }}</option>
</select>
<br>
<br>
<label for="product_subject_input">Product Subject:</label>
<select v-if="form.topRated" id="product_subject_input" v-model="form.subject_id">
<option value="5">Black Diamond</option>
</select>
<select v-if="form.topRated==false" id="product_subject_input" v-model="form.subject_id">
<option disabled value>Select a Subject</option>
<option
v-for="(subject, index) in showRelatedSubj"
:key="index"
:value="subject"
>{{ subject.subject_name }}</option>
</select>
<br>
<br>
</form>
<pre>
<div>form: {{form}}</div>
<!-- <div>related subjects: {{showRelatedSubj}}</div> -->
</pre>
</div>
</template>
<script>
export default {
name: "PostForm",
data() {
return {
products: [
{
product_id: 1,
product_name: "Apple"
},
{
product_id: 2,
product_name: "Banana"
},
{
product_id: 3,
product_name: "Watermelon"
},
{
product_id: 4,
product_name: "Potato"
}
],
subjects: [
{
subject_id: 1,
product_id: 1,
subject_name: "Granny Smith"
},
{
subject_id: 2,
product_id: 1,
subject_name: "McIntosh"
},
{
subject_id: 3,
product_id: 2,
subject_name: "Cavendish"
},
{
subject_id: 4,
product_id: 3,
subject_name: "Jubilee"
},
{
subject_id: 5,
product_id: 3,
subject_name: "Black Diamond"
},
{
subject_id: 6,
product_id: 4,
subject_name: "Russet"
},
{
subject_id: 7,
product_id: 4,
subject_name: "Yukon Gold"
}
],
form: {
topRated: false,
product_id: "",
subject_id: ""
}
};
},
computed: {
showRelatedSubj() {
return this.subjects.filter(
subject => this.form.product_id === subject.product_id
);
}
}
};
</script>

Answer 1

you could add a change event listener to your input checkbox and set a method for that event.
<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
}
}
for disabling the select options after checking Top Rated checkbox, try attribute binding. :disabled in this case.
<select :disabled="select_disabled" v-if="form.topRated" id="product_select_input" v-model="form.product_id">
<option value="3">Watermelon</option>
</select>
define select_disabled in your data, set it to false initially.
and add this to your select_top_rated() method.
this.select_disabled = true