Как включить вложенные флажки (параметры) на флажок родительского флажка в Vue Js - PullRequest
Новая
       3

Как включить вложенные флажки (параметры) на флажок родительского флажка в Vue Js

0 голосов
/ 02 апреля 2019

У меня есть простой список вопросов.У него есть несколько опций, и у этих опций есть несколько вложенных подопций.Так что нужно скрывать все вложенные флажки, пока не проверяет родительский флажок.

Я пытался сделать это, но не смог заставить его работать.

я пробовал это до сих пор:

Для лучшего понимания, пожалуйста, взгляните на эту скрипку 

    <div id="app">
  <h2>Questions:</h2>
  <ul>
    <li v-for="question in questions">
    <div class="question">{{ question.question }}</div>
    <div class="label__wrap" v-for="option in question.options">
      <label>
          <input type="checkbox" v-model="question.answer" :value="option.option">

          <span>
              {{ option.option }}
          </span>
      </label>

        <div class="sub__label__wrap" v-for="opt in option.subOptions">
              <label>
                 <input type="checkbox" v-model="option.subOptsAnswers" :value=" opt.option">

                  <span>
                      {{ opt.option }}
                  </span>
              </label>
        </div>

    </div>
      <br><br>
    </li>
  </ul>
</div>

Спасибо.

1 Ответ

0 голосов
/ 02 апреля 2019

Обновленная скрипка: https://jsfiddle.net/rcam67b9/

проверить массив ответов, существует ли выбранный ответ 

v-if="question.answer.indexOf(option.option) !== -1"

Финальный код 

<div id="app">
  <h2>Questions:</h2>
  <ul>
    <li v-for="question in questions">
    <div class="question">{{ question.question }}</div>
    <div class="label__wrap" v-for="option in question.options">
      <label>
          <input type="checkbox" v-model="question.answer" :value="option.option">

          <span>
              {{ option.option }}
          </span>
      </label>

        <div class="sub__label__wrap" v-for="opt in option.subOptions" v-if="question.answer.indexOf(option.option) !== -1">
              <label>
                 <input type="checkbox" v-model="option.subOptsAnswers" :value=" opt.option">

                  <span>
                      {{ opt.option }}
                  </span>
              </label>
        </div>

    </div>
      <br><br>
    </li>
  </ul>
</div>
...