VueJSのクリックでクラスを切り替える

Question

私は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/

Answer 1

あなたはメソッドにイベントハンドラをキャッチする必要が

、あなたがこの中に呼び出される側、すなわちアンカーオブジェクトを参照できることを利用し場合。

フィドルを参照してください：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"; 
     } 
    } 
    }) 

Answer 2

ですあなたが望む以上にあなたのコードを変更する可能性のある代替ソリューション。私はあなたが学び、代替案に興味があるので、これが役に立つかもしれないと考えました。私はあなたのリンクを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/

Answer 3

何ができるかは、現在アクティブリンクを保持するためにdataプロパティを使用しています。その後、アクティブなリンクであり、.activeクラスを適用する必要がある場合は、任意のリンクテストを行うことができます。

リンクをクリックすると、そのプロパティの新しい値を設定するだけです。現在アクティブな同じリンクがクリックされた場合、プロパティはクリアされ、すべてのリンクから.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 
    } 
} 

をそれは明らかではありませんソリューションをきれいにすることができますが、あなたが提示したマークアップにソリューションが適合しているという要件に固執しています。

Answer 4

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>