基于 HTML 复选框的动态 select 下拉菜单值

Question

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

不幸的是，我无法让它工作，因为我似乎必须手动 select 值才能使它们出现。

如果您选中 "Top Rated" 复选框，它应该动态地 select 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>

Answer 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 复选框后禁用 select 选项，请尝试属性绑定。 :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

基于 HTML 复选框的动态 select 下拉菜单值

Dynamically select dropdown menu values based on HTML checkbox

vuejs2

vue-cli-3