VueJ에서 클릭 시 클래스 전환s

VueJ에서 클릭 시 클래스 전환s

저는 Vuejs를 배우고 있는데, 수업을 빼먹는 것과 같은 간단한 일이 항상 귀찮은 일이라는 것을 알게 되었습니다.3개의 링크 사이의 클릭에 따라 .active 클래스를 추가 또는 삭제할 수 있는 방법을 알려주세요.

다음 예에서는 추가는 정상적으로 동작하지만 모든 링크에 .active가 추가되어 다시 클릭해도 삭제되지 않습니다.

<div id="app">
  <h2>App</h2>
  <ul>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
  </ul>
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
    isActive: false
},
methods: {
  activeLink() {
    // the line below did not work
    // document.getElementsByClassName("active").isActive = false,
    this.isActive = true
  }
 }
})

JSfiddle은 이쪽(https://jsfiddle.net/s9r4q0gc/)입니다.

메서드에서 이벤트핸들러를 잡아야 하며 이를 사용하여 착신측(즉, 이 경우 앵커오브젝트)을 참조할 수 있습니다.

https://jsfiddle.net/s9r4q0gc/2/ 를 참조해 주세요.

activeLink(event) {
    if(event.target.className == "noclass")
    {
        event.target.className = "link active";
    }
    else
    {
        event.target.className = "noclass";
    }
  }

갱신:

이 바이올린을 사용해보고 그것이 성공하고 있는지 확인해보세요:https://jsfiddle.net/s9r4q0gc/4/

  var app = new Vue({
    el: '#app',
    data: {
      isActive: false
    },
    methods: {
      activeLink(event) {
        var checkboxes = document.getElementsByClassName ("noclass");

        for (var i=0; i<checkboxes.length; i++) {
           checkboxes[i].className = "link active";
           //checkboxes[i].className = "link";
        }
            event.target.className = "noclass";
      }
    }
  })

사용할 수 있는 것은data현재 활성화 링크를 유지하는 속성입니다.그러면 링크 테스트가 활성화되어 있는지, 링크 테스트가 활성화되어 있는지,.activeclass를 적용해야 합니다.

링크를 클릭할 때 해당 속성의 새 값을 설정하기만 하면 됩니다.현재 활성화되어 있는 링크와 동일한 링크를 클릭하면 속성이 클리어되므로.active모든 링크의 클래스그렇지 않으면 클래스가 클릭한 링크에 추가됩니다.

이것은 CodePen으로 내가 말하는 의미를 나타내고 있지만, 당신의 마크업은 다음과 같습니다.

<li><a href="#" class="link" :class="{ active: activeId == 'link-1' }"
    @click.prevent="activeLink('link-1')">Link text</a></li>

<li><a href="#" class="link" :class="{ active: activeId == 'link-2' }"
    @click.prevent="activeLink('link-2')">Link text</a></li>

<li><a href="#" class="link" :class="{ active: activeId == 'link-3' }"
    @click.prevent="activeLink('link-3')">Link text</a></li>

JS는 다음과 같습니다.

data: {
  activeId: null
},
methods: {
  activeLink(linkIdent) {
    this.activeId = this.activeId === linkIdent ? null : linkIdent
  }
}

분명히 그렇게 깨끗한 솔루션은 아니지만, 저는 당신이 제공한 마크업에 맞는 솔루션을 요구하고 있습니다.

다음은 코드를 원하는 것보다 더 많이 수정할 수 있는 대체 솔루션입니다.저는 당신이 이제 막 배우고 있고 다른 것에 관심이 있을 수 있기 때문에 이것이 도움이 될 것이라고 생각했습니다.먼저 링크를 vue 내의 객체 배열로 선언하고 각 객체에 활성 속성을 할당합니다.그러면 활성화 값을 인라인으로 전환하거나 toggleActive 함수를 사용할 수 있습니다(현재 사용되지 않음).인라인 로직보다 함수를 사용하는 경우 설명을 위해 여기에 기재되어 있습니다).

HTML:

<div id="app">
  <h2>App</h2>
  <ul>
    <li v-for="l in links">
      <a href="#" class="link" :class="{ active: l.active}" @click="l.active = !l.active">{{l.text}}</a>
    </li>
  </ul>
</div>

Javascript:

var app = new Vue({
  el: '#app',
  data: {
    links: [{
      text: "Link text",
      active: false
    },{
      text: "Second text",
      active: false
    },{
      text: "Third text",
      active: false
    }]
  },
  methods: {
    //To use this function make @click in html to:
    //@click="toggleActive(l)"
    toggleActive(x) {
      x.active = !x.active;
    }
  }
})

https://jsfiddle.net/yrbt90v9/

링크를 정적으로 입력할 필요가 없도록 V-for 및 항목 배열을 사용합니다.이것에 의해, 찾고 있는 동적인 기능이 가능하게 됩니다.

  var app = new Vue({
    el: '#app',
    data: {
      links: [
       {text: "Link Text", active: false},
       {text: "Link Text", active: false},
       {text: "Link Text", active: false}
      ]
    },
    methods: {
      activate(link) {
        link.active = !link.active
      }
    }
  })

.link{
  text-decoration: none;
  color: #555;
}
.active{
  text-decoration: underline;
  color: #42b983;
}

<div id="app">
      <h2>App</h2>
      <ul>
        <li v-for="link in links"><a href="#" class="link" :class="{ active: link.active }" @click="activate(link)">Link text</a></li>
      </ul>
    </div>

언급URL : https://stackoverflow.com/questions/41231274/toggle-class-on-click-in-vuejs