Question

我想在我的代码中使用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>

所以，我想知道每个项目折叠项目。像这样在图像中。

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

Answer 1

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

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

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

如果您希望它们分别展开/折叠，则需要为每个元素添加单个变量。您已部分执行此操作，只需使用show更改course.show的剩余实例，您就应该好了。

（可能是想要在<a>内清除那个嵌套的<a>;你可以删除内部{。}}。

Answer 2

我使用vue-resource解决了这个问题，我在Laravel中使用Guzzle并且需要Controller中的数据使得这不是被动的。我使用组件中的vue-resource解决了这个问题。

使用Transition Vue折叠

2 个答案: