想要在vue中用@绑定的事件函数中,通过点击只改变点击元素p的颜色,同时,决定相邻元素ul的显示和隐藏。

<div class="mailtree" v-for="(item,index) in mailData">
   <p class="grouplabel"  @click="handleGroup($event)">
       <span><i class="fa fa-play playicon"></i></span>
       <span><i class="fa fa-folder fa-lg foldericon" ></i></span>
       <span class="gname">{{item.label}}</span>
   </p>
   //注意:因为p元素在循环里面,会有很多个,现在点击会点到里面的span元素,如何解决?
   <ul class="treeul" v-show="local">
      <li v-for="(citem,cindex) in item.children">{{citem.label}}</li>
   </ul>
   //注意:因为ul元素在循环里面,会有很多个,点击p元素,只想其相邻的ul元素显示和隐藏,如何解决?
</div>

<script>
export default{
   data(){
       local:true;
   },
   methods:{
       handleGroup(e){
           e.target.style.backgroundColor  = '#6495CC';//行不通,会作用到单独的span元素上;
           this.local = !this.local;//不能只针对相邻ul元素,会让所有的ul元素都显示和隐藏,不满足需求;
       }
   }
}
</script>

回答:

<p class="grouplabel"  @click="handleGroup($event)">
       <span><i class="fa fa-play playicon"></i></span>
       <span><i class="fa fa-folder fa-lg foldericon" ></i></span>
       <span class="gname">{{item.label}}</span>
   </p>
   //注意:因为p元素在循环里面,会有很多个,现在点击会点到里面的span元素,如何解决?
   <ul class="treeul" v-show="local">
      <li v-for="(citem,cindex) in item.children">{{citem.label}}</li>
   </ul>

把这块代码封装成子组件,通过独立作用域来控制相邻元素的显示隐藏

回答:

改一下数据结构吧,所有的UL都用不用的local来管理状态!

<div class="mailtree" v-for="(item,index) in mailData">
   <p class="grouplabel"  @click="handleGroup(index)" :class="{'background1':item.local}">
       <span><i class="fa fa-play playicon"></i></span>
       <span><i class="fa fa-folder fa-lg foldericon" ></i></span>
       <span class="gname">{{item.label}}</span>
   </p>
   //注意:因为p元素在循环里面,会有很多个,现在点击会点到里面的span元素,如何解决?
   <ul class="treeul" v-show="item.local">
      <li v-for="(citem,cindex) in item.children">{{citem.label}}</li>
   </ul>
   //注意:因为ul元素在循环里面,会有很多个,点击p元素,只想其相邻的ul元素显示和隐藏,如何解决?
</div>
<style>
.background1{background:#6495CC;}
</style>
<script>
export default{
   data(){
       mailData:[
           {local:true},
           {local:true},
           {local:true},
           {local:true},
       ]
       
   },
   methods:{
       handleGroup(index){
           //你这样写,肯定是作用在span上面,因为e.target就是span
           //e.target.style.backgroundColor  = '#6495CC';//行不通,会作用到单独的span元素上;
           
           this.mailData[index].local = !this.mailData[index].local;
       }
   }
}
</script>

回答:

//注意:因为p元素在循环里面,会有很多个,现在点击会点到里面的span元素,如何解决?

因为你p元素包裹了span元素,可以直接将handleGroup事件绑定到具体某个你需要的span元素上。
然后在mailData上给每个ul设置一个单独的flag,控制ul是否显示。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注