我有一个带有HTML复选框和两个下拉/选择菜单的表单。如果我选中该复选框,它应该在下拉菜单中动态选择值。
不幸的是,我无法正常使用它,因为我似乎必须手动选择值以使其出现。
如果选中“最高评分” 框,则它应动态选择Watermelon
产品和Black Diamond
作为产品主题。
此处的沙盒:https://codesandbox.io/embed/restrict-values-on-toggle-mxiq3
任何提示和建议将不胜感激
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>
答案 0 :(得分:1)
您可以将更改事件侦听器添加到input checkbox
并为该事件设置方法。
<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
}
}
要在选中Top Rated
复选框后禁用选择选项,请尝试属性绑定。 :disabled
在这种情况下。
<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()
方法中。
this.select_disabled = true