javascript - vue2中如何选中当前的数据,$event.currentTarget 这个是可以获取当前元素

问题描述

问 题

 <li class="packageItem" @click="addClassFun(classIndex,$event)"
                v-for="(packItem,classIndex) in packageList">
              <div class="itemShow" :class="{toggle:classIndex==classNum}">
              <h2>{{packItem.productName}}</h2>
              <p>{{packItem.productAmt}}元:{{packItem.ticketAmt}}券</p>
                 <div class="fwitem">另赠送<span class="c-yellow">{{packItem.ticketGift}}券</span></div>
                 </div>
                 <input type="radio" name="package" value=""
                        :checked="classIndex==classNum"
                 >
               </li>
               
              

这里是获取当前dom

当前dom打印出来了

当前套餐组件，这里的packagelist是所有的数据 我想要当前的数据的

destroyed(){
      bus.$emit('change',this.packageList);
    },

这个是要接受数据的组件

 created() {
     bus.$on('change', (packageList) =>
       this.packageList = packageList
     )},

解决方案

既然你都知道通过什么样的方式来修改active class了，为什么就不知道通过什么方式来修改当前数据呢，思路不都一样嘛。感觉就是有个小弯没绕过来。

首先在dada中定义一个变量用来保存当前的数据与当前的索引

data() {
  curData: null,
  classNum: 0
}

然后定义一个点击事件，用来修改curData与classNum的值，将你的addClassFun改一下名字

methods: {
  clickHandler (data, num) {
    this.curData = data;
    this.classNum = num;
  }
}

最后在模板中绑定click点击事件即可

<li class="packageItem" @click="clickHandler(packItem, classIndex)" v-for="(packItem,classIndex) in packageList">
    <div class="itemShow" :class="{toggle:classIndex==classNum}">
    ...
</li>

这样每点击一次，curData就会改变，等于当前的packItem。

这篇关于javascript - vue2中如何选中当前的数据,$event.currentTarget 这个是可以获取当前元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！