Vue.js 2.6.11。 如何在循环期间隐藏除一个单击之外的所有 li 元素？

Question

为了大致了解问题的本质，我将附上布局的屏幕截图。

静态布局

单击问题时的布局

有问题。 它们将通过循环输出。 循环由 li 标签内的内容组成。 当你点击按钮时，里面的内容应该打开，这个问题应该被删除。

但问题是循环中显示的其他问题与点击无关。

我怎样才能使它在单击时打开单击的问题中的内容并隐藏其他问题？

也许vue中有特定的工具。 或者这一切都是在 html 级别完成的。 我会很高兴得到任何帮助！

我将从该组件中插入一段代码，以便了解该问题。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <li v-for="question in questions" :key="question.id" :class="{'is-show': question.isShow, 'is-hide' : question.isHide}" class="list-group-item"> <button :id="question.id" v-bind:class="{'d-none': question.isShow}" v-on:click="showQuestion(question, $event)" type="button"> {{question.title}} </button> <div v-bind:class="{'d-none': question.isHide}" class="faq-details-item"> <div class="faq-details-item-header d-flex justify-content-between"> <h3 class="faq-title">{{question.title}}</h3> <button :id="question.id" v-on:click="showQuestion(question, $event)" class="faq-back">Вернуться</button> </div> <div class="faq-details-item-body"> <p class="faq-description"> {{question.description}} </p> </div> </div> </li> <script> export default { name: "FAQContent", data() { return { questions: [ {id: 1, title: 'Вопрос1', description: 'lorem lorem lorem', isShow: false, isHide: true}, {id: 2, title: 'Вопрос2', description: 'lorem lorem lorem', isShow: false, isHide: true}, {id: 3, title: 'Вопрос3', description: 'lorem lorem lorem', isShow: false, isHide: true}, ] } }, computed: { hideQuestions: function (){ } }, methods: { showQuestion: function (question,event) { question.isHide = !question.isHide; question.isShow = !question.isShow; } } } </script>

Answer 1

您可以添加名为： activeQuestion的新数据属性。

• 单击问题时 => 将其分配给activeQuestion

• 单击取消时 => 将null分配给activeQuestion

然后在模板中，创建一个 if 条件来检查要渲染的内容：

• 渲染列表如果没有activeQuestion

• 如果已分配，则呈现活动问题

工作演示：