Динамически выбирать значения выпадающего меню на основе флажка HTML - PullRequest
Новая
       32

Динамически выбирать значения выпадающего меню на основе флажка HTML

0 голосов
/ 11 июля 2019

У меня есть форма с флажком HTML и двумя выпадающими меню. Если я установлю флажок, он должен динамически выбирать значения в раскрывающихся меню.

К сожалению, я не могу заставить это работать, так как кажется, что мне нужно вручную выбрать значения, чтобы они появились.

Если вы установите флажок для «Лучшие оценки» , он должен динамически выбирать Watermelon продукт и Black Diamond в качестве темы продукта.

Песочница здесь: https://codesandbox.io/embed/restrict-values-on-toggle-mxiq3

Любые советы и рекомендации будут с благодарностью

PostForm.vue 

<code><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> -->
экспорт по умолчанию { название: "PostForm", данные() { вернуть { товары: [ { product_id: 1, product_name: "Apple" }, { product_id: 2, product_name: "Банан" }, { product_id: 3, product_name: "Арбуз" }, { product_id: 4, product_name: "Картофель" } ], предметы: [ { subject_id: 1, product_id: 1, subject_name: "Бабушка Смит" }, { subject_id: 2, product_id: 1, имя_субъекта: "Макинтош" }, { subject_id: 3, product_id: 2, subject_name: "Кавендиш" }, { subject_id: 4, product_id: 3, subject_name: "Юбилейный" }, { subject_id: 5, product_id: 3, subject_name: "Черный бриллиант" }, { subject_id: 6, product_id: 4, subject_name: "Красновато-коричневый" }, { subject_id: 7, product_id: 4, subject_name: "Юкон Голд" } ], форма: { topRated: false, Код товара: "", subject_id: "" } }; }, вычислено: { showRelatedSubj () { вернуть this.subjects.filter ( subject => this.form.product_id === subject.product_id ); } } };

1 Ответ

1 голос
/ 11 июля 2019

вы можете добавить прослушиватель события изменения к вашему 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
...