使用 Transition Vue 折叠答案

【问题标题】：Collapse using Transition Vue使用 Transition Vue 折叠
【发布时间】：2017-05-17 14:11:17
【问题描述】：

我想在我的代码中使用 Vue 的折叠，但是我有一个错误。

[Vue warn]: <transition-group> children must be keyed: <p>

我的组件：

<template xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <section style="background-color: #dedede;">
    <div class="container-fluid">
      <div class="Consult-faq container">
        <div class="row">
          <div class="col-sm-12">
            <h2>Cursos</h2>
            <a v-for="(course,id) in courses" v-on:click="course.show = !course.show">
              <a v-on:click="show = !show">
                <div class="col-xs-12" style="border-bottom: solid;border-bottom-color: #999999;border-bottom-width:1px ">
                  <div class="col-xs-12">
                    <h4>
                      <i v-if="course.show" class="fa fa-plus-square text-right" aria-hidden="true"/>
                      <i v-else class="fa fa-minus-square text-right" aria-hidden="true"/>
                      {{course.text}}
                    </h4>
                  </div>
                </div>
                <transition-group name="fade">
                  <p v-if="show">
                    <div class="col-xs-12">
                      <article v-for="n in 2" class="Module-content">
                        <div class=" col-sm-12 col-md-6" style="position: relative;">
                          <div v-for="(course, index) in course.courses">
                            <course-card v-if="index % 2 == n - 1" :course="course"></course-card>
                          </div>
                        </div>
                      </article>
                    </div>
                  </p>
                </transition-group>
              </a>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
  export default{
    props : [
      'courses'
    ],
    data(){
      return {
          show: false 
      }
    },
    mounted() {
      console.log(this.courses)  
    }
  }
</script>

所以，我想知道按项目折叠项目。如图所示。

当我点击展开时，所有课程都会展开或关闭所有课程。

【问题讨论】：

标签： laravel-5 vue.js transition

【解决方案1】：

转换在这里无关紧要（尽管您可以通过使用transition 而不是transition-group 来消除该警告，因为转换仅作用于单个节点，而不是组。）

现在，您依靠单个变量 show 来控制所有元素的可见性，因此它们都会响应对其中任何一个的点击：

<a v-on:click="show = !show">
<p v-if="show" >

如果您希望每个元素分别展开/折叠，您需要为每个元素设置单独的变量。您已经部分完成了此操作，只需将剩余的 show 实例更改为 course.show 即可。

（可能想清理嵌套在<a> 中的<a>，而您可以删除内部的。）

【讨论】：

好的，我重构了这个，但错误仍然存在。 [Vue warn]: <transition-group> children must be keyed: <p>
我在答案中添加了这一点（您希望在这里转换而不是转换组。）转换警告与 show 错误无关。

【解决方案2】：

我使用 vue-resource 解决了这个问题，我在 Laravel 中使用 Guzzle 并要求 Controller 中的数据使其不响应。我在组件中使用 vue-resource 解决了这个问题。

【讨论】：