Vue js toggle class on click

Question

How does toggle a class in vue js   I have the following    lt th class  initial   v-on  click  myFilter  gt       lt span class  wkday  gt M lt  span gt   lt  th gt   new Vue     el    my-container     data        methods        myFilter  function             some code to filter users                 When I click th I want to apply active as a class as follows    lt th class  initial active  v-on  click  myFilter  gt       lt span class  wkday  gt M lt  span gt   lt  th gt          This needs to toggle i e  each time its clicked it needs to add remove the class

User · Answer

for nuxt link and bootstrap v5 navbar-nav  I used a child component               lt nuxt-link                click prevent native  quot isDropdwonMenuVisible    isDropdwonMenuVisible quot                to  quot  quot                 title  quot item title quot                 class  quot  item cssClasses   show  isDropdwonMenuVisible   quot                 id  quot  navbarDropdownMenuLink-  index   quot                 aria-expanded  quot  isDropdwonMenuVisible   true   false  quot                class  quot nav-link dropdown-toggle quot                aria-current  quot page quot                role  quot button quot                data-toggle  quot dropdown quot               gt                   item label                 lt  nuxt-link gt   data         return         isDropdwonMenuVisible  false

User · Answer

x000D   x000D  new Vue   x000D    el    fsbar   x000D    data   x000D      isActive  false x000D       x000D    methods    x000D      toggle  function    x000D        this isActive    this isActive  x000D        x000D      x000D      x000D     x000D      DEMO STYLE x000D     x000D   import  https   fonts googleapis com css family Poppins 300 400 500 600 700   x000D   x000D   x000D  body   x000D      font-family   Poppins   sans-serif  x000D      background   fafafa  x000D    x000D   x000D  p   x000D      font-family   Poppins   sans-serif  x000D      font-size  1 1em  x000D      font-weight  300  x000D      line-height  1 7em  x000D      color   999  x000D    x000D   x000D  a  a hover  a focus   x000D      color  inherit  x000D      text-decoration  none  x000D      transition  all 0 3s  x000D    x000D   x000D   navbar   x000D      padding  15px 10px  x000D      background   fff  x000D      border  none  x000D      border-radius  0  x000D      margin-bottom  40px  x000D      box-shadow  1px 1px 3px rgba 0  0  0  0 1   x000D    x000D   x000D   navbar-btn   x000D      box-shadow  none  x000D      outline  none  important  x000D      border  none  x000D    x000D   x000D   line   x000D      width  100   x000D      height  1px  x000D      border-bottom  1px dashed  ddd  x000D      margin  40px 0  x000D    x000D   x000D  i  span   x000D      display  inline-block  x000D    x000D   x000D     --------------------------------------------------- x000D      SIDEBAR STYLE x000D  -----------------------------------------------------    x000D   wrapper   x000D      display  flex  x000D      align-items  stretch  x000D    x000D   x000D   sidebar   x000D      min-width  250px  x000D      max-width  250px  x000D      background   7386D5  x000D      color   fff  x000D      transition  all 0 3s  x000D    x000D   x000D   sidebar active   x000D      min-width  80px  x000D      max-width  80px  x000D      text-align  center  x000D    x000D   x000D   sidebar active  sidebar-header h3   sidebar active  CTAs   x000D      display  none  x000D    x000D   x000D   sidebar active  sidebar-header strong   x000D      display  block  x000D    x000D   x000D   sidebar ul li a   x000D      text-align  left  x000D    x000D   x000D   sidebar active ul li a   x000D      padding  20px 10px  x000D      text-align  center  x000D      font-size  0 85em  x000D    x000D   x000D   sidebar active ul li a i   x000D      margin-right   0  x000D      display  block  x000D      font-size  1 8em  x000D      margin-bottom  5px  x000D    x000D   x000D   sidebar active ul ul a   x000D      padding  10px  important  x000D    x000D   x000D   sidebar active a aria-expanded  false    before   sidebar active a aria-expanded  true    before   x000D      top  auto  x000D      bottom  5px  x000D      right  50   x000D      -webkit-transform  translateX 50    x000D      -ms-transform  translateX 50    x000D      transform  translateX 50    x000D    x000D   x000D   sidebar  sidebar-header   x000D      padding  20px  x000D      background   6d7fcc  x000D    x000D   x000D   sidebar  sidebar-header strong   x000D      display  none  x000D      font-size  1 8em  x000D    x000D   x000D   sidebar ul components   x000D      padding  20px 0  x000D      border-bottom  1px solid  47748b  x000D    x000D   x000D   sidebar ul li a   x000D      padding  10px  x000D      font-size  1 1em  x000D      display  block  x000D    x000D   sidebar ul li a hover   x000D      color   7386D5  x000D      background   fff  x000D    x000D   sidebar ul li a i   x000D      margin-right  10px  x000D    x000D   x000D   sidebar ul li active  gt  a  a aria-expanded  true     x000D      color   fff  x000D      background   6d7fcc  x000D    x000D   x000D   x000D  a data-toggle  collapse     x000D      position  relative  x000D    x000D   x000D  a aria-expanded  false    before  a aria-expanded  true    before   x000D      content    e259   x000D      display  block  x000D      position  absolute  x000D      right  20px  x000D      font-family   Glyphicons Halflings   x000D      font-size  0 6em  x000D    x000D  a aria-expanded  true    before   x000D      content    e260   x000D    x000D   x000D   x000D  ul ul a   x000D      font-size  0 9em  important  x000D      padding-left  30px  important  x000D      background   6d7fcc  x000D    x000D   x000D  ul CTAs   x000D      padding  20px  x000D    x000D   x000D  ul CTAs a   x000D      text-align  center  x000D      font-size  0 9em  important  x000D      display  block  x000D      border-radius  5px  x000D      margin-bottom  5px  x000D    x000D   x000D  a download   x000D      background   fff  x000D      color   7386D5  x000D    x000D   x000D  a article  a article hover   x000D      background   6d7fcc  important  x000D      color   fff  important  x000D    x000D   x000D   x000D   x000D     --------------------------------------------------- x000D      CONTENT STYLE x000D  -----------------------------------------------------    x000D   content   x000D      padding  20px  x000D      min-height  100vh  x000D      transition  all 0 3s  x000D    x000D   x000D   x000D     --------------------------------------------------- x000D      MEDIAQUERIES x000D  -----------------------------------------------------    x000D   media  max-width  768px    x000D       sidebar   x000D          min-width  80px  x000D          max-width  80px  x000D          text-align  center  x000D          margin-left  -80px  important   x000D        x000D      a aria-expanded  false    before  a aria-expanded  true    before   x000D          top  auto  x000D          bottom  5px  x000D          right  50   x000D          -webkit-transform  translateX 50    x000D          -ms-transform  translateX 50    x000D          transform  translateX 50    x000D        x000D       sidebar active   x000D          margin-left  0  important  x000D        x000D   x000D       sidebar  sidebar-header h3   sidebar  CTAs   x000D          display  none  x000D        x000D   x000D       sidebar  sidebar-header strong   x000D          display  block  x000D        x000D   x000D       sidebar ul li a   x000D          padding  20px 10px  x000D        x000D   x000D       sidebar ul li a span   x000D          font-size  0 85em  x000D        x000D       sidebar ul li a i   x000D          margin-right   0  x000D          display  block  x000D        x000D   x000D       sidebar ul ul a   x000D          padding  10px  important  x000D        x000D   x000D       sidebar ul li a i   x000D          font-size  1 3em  x000D        x000D       sidebar   x000D          margin-left  0  x000D        x000D       sidebarCollapse span   x000D          display  none  x000D        x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D       lt head gt  x000D           lt meta charset  utf-8  gt  x000D           lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D           lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D   x000D           lt title gt Collapsible sidebar using Bootstrap 3 lt  title gt  x000D   x000D            lt  -- Bootstrap CSS CDN -- gt  x000D           lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D           lt  -- Our Custom CSS -- gt  x000D           lt link rel  stylesheet  href  style4 css  gt  x000D       lt  head gt  x000D       lt body gt  x000D   x000D   x000D   x000D           lt div class  wrapper  id  fsbar  gt  x000D               lt  -- Sidebar Holder -- gt  x000D               lt nav id  sidebar   class    active  isActive    gt  x000D                   lt div class  sidebar-header  gt  x000D                       lt h3 gt Bootstrap Sidebar lt  h3 gt  x000D                       lt strong gt BS lt  strong gt  x000D                   lt  div gt  x000D   x000D                   lt ul class  list-unstyled components  gt  x000D                       lt li class  active  gt  x000D                           lt a href   homeSubmenu  data-toggle  collapse  aria-expanded  false  gt  x000D                               lt i class  glyphicon glyphicon-home  gt  lt  i gt  x000D                              Home x000D                           lt  a gt  x000D                           lt ul class  collapse list-unstyled  id  homeSubmenu  gt  x000D                               lt li gt  lt a href     gt Home 1 lt  a gt  lt  li gt  x000D                               lt li gt  lt a href     gt Home 2 lt  a gt  lt  li gt  x000D                               lt li gt  lt a href     gt Home 3 lt  a gt  lt  li gt  x000D                           lt  ul gt  x000D                       lt  li gt  x000D                       lt li gt  x000D                           lt a href     gt  x000D                               lt i class  glyphicon glyphicon-briefcase  gt  lt  i gt  x000D                              About x000D                           lt  a gt  x000D                           lt a href   pageSubmenu  data-toggle  collapse  aria-expanded  false  gt  x000D                               lt i class  glyphicon glyphicon-duplicate  gt  lt  i gt  x000D                              Pages x000D                           lt  a gt  x000D                           lt ul class  collapse list-unstyled  id  pageSubmenu  gt  x000D                               lt li gt  lt a href     gt Page 1 lt  a gt  lt  li gt  x000D                               lt li gt  lt a href     gt Page 2 lt  a gt  lt  li gt  x000D                               lt li gt  lt a href     gt Page 3 lt  a gt  lt  li gt  x000D                           lt  ul gt  x000D                       lt  li gt  x000D                       lt li gt  x000D                           lt a href     gt  x000D                               lt i class  glyphicon glyphicon-link  gt  lt  i gt  x000D                              Portfolio x000D                           lt  a gt  x000D                       lt  li gt  x000D                       lt li gt  x000D                           lt a href     gt  x000D                               lt i class  glyphicon glyphicon-paperclip  gt  lt  i gt  x000D                              FAQ x000D                         isActive  false   lt  a gt  x000D                       lt  li gt  x000D                       lt li gt  x000D                           lt a href     gt  x000D                               lt i class  glyphicon glyphicon-send  gt  lt  i gt  x000D                              Contact x000D                           lt  a gt  x000D                       lt  li gt  x000D                   lt  ul gt  x000D   x000D                   lt ul class  list-unstyled CTAs  gt  x000D                       lt li gt  lt a href  https   bootstrapious com tutorial files sidebar zip  class  download  gt Download source lt  a gt  lt  li gt  x000D                       lt li gt  lt a href  https   bootstrapious com p bootstrap-sidebar  class  article  gt Back to article lt  a gt  lt  li gt  x000D                   lt  ul gt  x000D               lt  nav gt  x000D   x000D               lt  -- Page Content Holder -- gt  x000D               lt div id  content  gt  x000D   x000D                   lt nav class  navbar navbar-default  gt  x000D                       lt div class  container-fluid  gt  x000D   x000D                           lt div class  navbar-header  gt  x000D                               lt button type  button  id  sidebarCollapse  class  btn btn-info navbar-btn   click  toggle    gt  x000D                                   lt i class  glyphicon glyphicon-align-left  gt  lt  i gt  x000D                                   lt span gt Toggle Sidebar lt  span gt  x000D                               lt  button gt  x000D                           lt  div gt  x000D   x000D                           lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt  x000D                               lt ul class  nav navbar-nav navbar-right  gt  x000D                                   lt li gt  lt a href     gt Page lt  a gt  lt  li gt  x000D                                   lt li gt  lt a href     gt Page lt  a gt  lt  li gt  x000D                                   lt li gt  lt a href     gt Page lt  a gt  lt  li gt  x000D                                   lt li gt  lt a href     gt Page lt  a gt  lt  li gt  x000D                               lt  ul gt  x000D                           lt  div gt  x000D                       lt  div gt  x000D                   lt  nav gt  x000D   x000D                   lt h2 gt Collapsible Sidebar Using Bootstrap 3 lt  h2 gt  x000D                   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D                   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D   x000D                   lt div class  line  gt  lt  div gt  x000D   x000D                   lt h2 gt Lorem Ipsum Dolor lt  h2 gt  x000D                   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D   x000D                   lt div class  line  gt  lt  div gt  x000D   x000D                   lt h2 gt Lorem Ipsum Dolor lt  h2 gt  x000D                   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D   x000D                   lt div class  line  gt  lt  div gt  x000D   x000D                   lt h3 gt Lorem Ipsum Dolor lt  h3 gt  x000D                   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D               lt  div gt  x000D           lt  div gt  x000D   x000D   x000D   x000D   x000D   x000D           lt  -- jQuery CDN -- gt  x000D            lt script src  https   code jquery com jquery-1 12 0 min js  gt  lt  script gt  x000D            lt  -- Bootstrap Js CDN -- gt  x000D            lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D            lt script type  text javascript  gt  x000D                   document  ready function      x000D                         sidebarCollapse   on  click   function      x000D                             sidebar   toggleClass  active    x000D                         x000D                     jquery equivalent to vue x000D            lt  script gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Without the need of a method     html element  will display active  class if showMobile is true   clicking on the elment will toggle showMobileMenu to true and false alternatively  lt div id  quot mobile-toggle quot    class  quot   active  showMobileMenu   quot    click  quot showMobileMenu    showMobileMenu quot  gt   lt  div gt     in your vue js app data        showMobileMenu  false

User · Answer

This example is using Lists  When clicking in some li it turn red  html    lt div id  app  gt     lt ul gt       lt li  click  activate li id    class    active   active el    li id    v-for  li in lista  gt   li texto   lt  li gt        lt  ul gt   lt  div gt    JS   var app   new Vue     el   app     data       lista    id   1   texto   line 1     id   2   texto   line 2     id   3   texto   line 3     id   4   texto   line 4     id   5   texto   line 5         active el 0        methods       activate function el           this active el   el                  css  ul  gt  li hover     cursor pointer     active     color red    font-weight bold      Fiddle   https   jsfiddle net w37vLL68 158

User · Answer

You could have the active class be dependent upon a boolean data value    lt th    class  initial      v-on  click  myFilter    v-class   active  isActive   gt     lt span class  wkday  gt M lt  span gt   lt  th gt   new Vue     el    my-container      data        isActive  false         methods        myFilter  function           this isActive    this isActive           some code to filter users

User · Answer

If you don t need to access the toggle from outside the element  this code works without a data variable    lt a  click  e   gt  e target classList toggle  active    gt  lt  a gt

User · Answer

If you need more than 1 class  You can do this    lt i id  icon     v-bind class     fa fa-star   showStar      v-on click  showStar    showStar     gt   lt  i gt    data      showStar  true     Notice the single quotes   around the classes   Thanks to everyone else s solutions

User · Answer

In addition to NateW s answer  if you have hyphens in your css class name  you should wrap that class within  single  quotes    lt th    class  initial      v-on click  myFilter    v-bind class     is-active    isActive    gt     lt span class  wkday  gt M lt  span gt    lt  th gt    See this topic for more on the subject

User · Answer

Try     lt template gt      lt th  class   initial    active  v-on  click  myFilter  gt          lt span class  wkday  gt M lt  span gt      lt  th gt     lt  template gt    lt script lang  ts  gt       active string        myFilter           this active  active         lt  script gt    lt style gt     active           your action            lt  style gt

User · Answer

1    click   event target classList toggle  active      2    class    active     click  active    active    3    class   initial      active    active            click  active    active    4    class    initial     active        click  active    active    Reference link  https   vuejs org v2 guide class-and-style html  Demo    x000D   x000D  new Vue   x000D    el    app1  x000D      x000D   x000D  new Vue   x000D    el    app2   x000D    data    active  false   x000D      x000D   x000D  new Vue   x000D    el    app3   x000D    data    active  false   x000D      x000D   x000D  new Vue   x000D    el    app4   x000D    data    active  false   x000D      x000D   initial   x000D    width  300px  x000D    height  100px  x000D    background  gray  x000D    x000D   x000D   active   x000D    background  red  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue js  gt  lt  script gt  x000D   x000D   lt  -- directly manipulation  not recommended -- gt  x000D   lt div id  app1  gt  x000D       lt button  x000D        class  initial    x000D         click   event target classList toggle  active    x000D       gt  event target classList toggle  active   lt  button gt  x000D   lt  div gt  x000D   x000D   lt  -- binding by object -- gt  x000D   lt div id  app2  gt  x000D       lt button  x000D        class  initial    x000D         class    active    x000D         click  active    active  x000D       gt class  initial   class    active    lt  button gt  x000D   lt  div gt  x000D   x000D   lt  -- binding by expression -- gt  x000D   lt div id  app3  gt  x000D       lt button  x000D         class   initial      active    active           x000D         click  active    active  x000D       gt  initial      active    active        lt  button gt  x000D   lt  div gt  x000D   x000D   lt  -- binding with object combined array -- gt  x000D   lt div id  app4  gt  x000D       lt button  x000D         class    initial     active       x000D         click  active    active  x000D       gt   initial     active    lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I ve got a solution that allows you to check for different values of a prop and thus different  lt th gt  elements will become active inactive  Using vue 2 syntax    lt th  class  initial     click stop prevent  myFilter  M     class    activeDay     M     active          gt   lt span class  wkday  gt M lt  span gt   lt  th gt       lt th  class  initial     click stop prevent  myFilter  T     class    activeDay     T     active          gt   lt span class  wkday  gt T lt  span gt   lt  th gt     new Vue     el    my-container      data          activeDay   M          methods        myFilter  function day           this activeDay   day           some code to filter users

User · Answer

This answer relevant for Vue js version 2   lt th    class  initial      v-on click  myFilter    v-bind class    active  isActive     gt     lt span class  wkday  gt M lt  span gt   lt  th gt    The rest of the answer by Douglas is still applicable  setting up the new Vue instance with isActive  false  etc    Relevant docs  https   vuejs org v2 guide class-and-style html Object-Syntax and https   vuejs org v2 guide events html Method-Event-Handlers

[css] Vue.js toggle class on click

Examples related to css

Examples related to vue.js