v-for应该在顶级v-if中跳过的显示项目

Question

我有下一个代码：

  <div v-for="question in questions">
      <h3 v-if="question.isEnabled">{{question.question}}</h3>
        <div v-for="answers in question.answers">
          <h4>{{answers.answer}}</h4>
        </div>
  </div>  

它应该只打印question.isEnabled个问题。在下一次迭代中，它应该从它们打印答案。它打印的问题甚至可以回答question.isEnabled条件中没有显示的问题。

它看起来像：

Answer 1

尝试filterBy

<div v-for="question in questions | filterBy true in isEnabled">
        <h3>{{question.question}}</h3>
        <div v-for="answers in question.answers">
           <h4>{{answers.answer}}</h4>
        </div>
    </div>

Answer 2

具体问题是v-if是一个指令，因此它必须附加到一个元素，仅影响该元素。因此，您的代码按照指定的方式工作，因为只有在条件为真时才会显示您的h3元素。

对于这种情况，您需要使用template v-if

<div v-for="question in questions">
  <template v-if="question.isEnabled">
    <h3>{{question.question}}</h3>
      <div v-for="answers in question.answers">
        <h4>{{answers.answer}}</h4>
      </div>
  </template>
</div>