vue 实现点击元素的点击功能

Question

                    <div v-for="item in forum[1]" class="comment">
                        <!-- 回复评论 -->
                        <span ref="spanid" class="none">{{item.id}}</span>
                        <img @click="com_pe" width="70" height="60" class="lun-img" :src="item.head_img"></img>
                        <div class="tim">{{item.addtime}}</div>
                        <div class="name">{{item.phone}}</div>
                        <div class="c_speak">{{item.content}}</div>
                        <!-- 点赞 -->
                        <i @click="Comment_zan(item)" class="com_i czan icon-favorite"><span class="com num">{{item.is_love}}</span></i>
                    </div>

// 评论第一个人点赞
Comment_zan(item) {

getComment($('.com').html()).then((res) => {
      if (res.status === ERR_OK) {
                    $('.com_i').html(res.data.data.is_love)
                }
            })
            if (parseInt($('.com').html()) - 1) {
                $('.com_i').css('color', 'red')
            } else {
                $('.com_i').css('color', '#008000')
            }
        },                       

Answer 1

Answer 2

$('.com_i')取到所有列表的心的dom了，不能用class选择。还有你用了vue可以不用dom选择器。

Answer 3

用vue的话，就不要总想着通过DOM实现操作了，jquery基本可以不用了，多用数据驱动。

比如你的这个例子，你点赞的时候，通过点击是可以知道对哪个用户(item)点赞的对不对，所以在item上，给对应的属性直接改就好了，页面上会自动更改的，包括点赞之后的样式，也可以通过一个属性控制，就不用每次手动操作DOM了。