Vue.jsでクリックしたDOMにclassを追加/削除したい

Question

jsonでタイトルと本文と画像URLのlistを取得して、アイテムのリストを生成します。
生成後のliをクリックしたらそのliにclass active を付与したいのですが、jqueryとか使わずVue.jsでシンプルに出来ないものかなと。

var jsonurl = 'list.json';
var xhr = new XMLHttpRequest();
xhr.open('GET', jsonurl);
xhr.send();
xhr.onload = function (e) {
    if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);
    var vue = new Vue({
        el: '#itme',
        data: {
            jsonDatas: json
       }
    });
  }
};

<ul id="itme">
    <li v-for="jsonData in jsonDatas">
        <img src="{{jsonData.imgUrl}}">
        <div>
            <h3 v-text="jsonData.title"></h3>
            <p v-if="jsonData.body" v-text="jsonData.body"></p>
        </div>
    </li>
</ul>

Answer 1

<li v-for="jsonData in jsonDatas">
↓
<li v-for="jsonData in jsonDatas" v-on:click="setActive">

var vue = new Vue({
  el: '#itme',
  data: {
    jsonDatas: json
  },
  methods: {
    setActive: function(e) {
      //一旦全てのliのclassを消す
      var li = e.currentTarget.parentNode.querySelectorAll(":scope > li");
      for (var i = 0; i < li.length; i++) {
        li[i].className = "";
      }
      //clickされたliにclassを付与
      e.currentTarget.className = "active";
    }
  }
});

【参考】
メソッドとイベントハンドリング - vue.js
https://jp.vuejs.org/guide/events.html

Comments

[kado_]

ありがとうございます！！
`var li = e.currentTarget.parentNode.querySelectorAll(":scope > li");`
これがわからなかったです。セレクタの使い方がいまいちわかって無かったです。
がんばってjs力を上げてゆきます！！

[sii_side]

e.currentTargetでli要素、parentNodeでul要素、querySelectorAll(":scope > li")で、ul要素直下のli要素全て、という流れです。

万が一リストをネストした場合に、孫以下のli要素を巻き込まないように、直下に限ったというものです。

とりあえず名前に依存しない書き方にしましたが、極端な話、今回のケースに限れば #itme > li でも大丈夫です。