Question

我有简单的问题清单。它具有一些选项，而这些选项具有一些嵌套的子选项。因此需要隐藏所有嵌套的复选框，直到选中父复选框为止。

我尝试这样做，但是无法正常工作。

到目前为止，我已经尝试过：

为更好地理解，请查看this fiddle

    <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>

谢谢。

Answer 1

更新的小提琴：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>

如何在Vue Js中切换检查父复选框上的嵌套复选框（选项）

1 个答案: