在vue中，jquery css方法不生效？

Question

<div class="project-card even" @click="project(1)">

   <p class="project-name">project2</p>

   <div class="project-content">

       <p>xxxxxxxxxxxxxxxxxxxxx</p>

       <span @click="closeProject(1)">返回</span>

    </div>

</div>

      closeProject:function (index) {

        $('.project-card').eq(index).css({

          'height':'100px',

        })

        console.log($('.project-card').eq(index).css('height'))

      },

      project:function (index) {

        $('.project-card').eq(index).css({

          'height':'100%'

        })

        $('.scroll').animate({

          scrollTop:document.getElementsByClassName('project-card')[index].offsetTop

        });

     

      },

代码如上，closeProject方法无法修改height高度为100px，为什么？，打印出的高度还是为原来的高度

Answer 1

我猜应该是 height: 100% 的问题，你有设置 body 的高度为 100% 吗

Answer 2

用vue就不要用jquery，或许你对jquery很熟，但是你用vue就应该用vue的方法去做，动画的话vue也有对应的方法和标签，还有es6已经出来几年了，是时候改变你的编码方式了。（个人建议）

Answer 3

因为你点击了span触发了closeProject方法，但是又冒泡触发了project方法，在span的click事件上加上.stop即可<span&nbsp;@click.stop="closeProject(1)">返回</span>