The, jquery css method does not work in vue?

      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
        });
     
      },
As in the

code above, the closeProject method cannot modify the height height to 100px. why? , the printed height is still the original height

Mar.25,2021

because you click span to trigger the closeProject method, but bubbling triggers the project method.
add .stop to the click event of span

.
<span @click.stop="closeProject(1)"></span>

I guess it's height: 100%. Did you set the height of body to 100%


it is recommended that you do not use jquery to control element styles in vue, but consider using: class,: style.

ide/class-and-style.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.


Don't use jquery, if you use vue. Maybe you are familiar with jquery, but you should use vue to do it when you use vue. Vue also has corresponding methods and tags for animation, and es6 has been out for several years. It's time to change the way you code. (personal suggestion)

Menu