vue.jsで特定の要素にtoggleClassを付けたい

Question

質問失礼いたします。
以下jqueryのコードですが、以下のような事をvue.jsで書きたいのですが、どのようにすればいいでしょうか。
よろしくお願いいたします。

<div class="parent">
    <div class="click">click here</div>
</div>
<div class="parent">
    <div class="click">click here</div>
</div>
<div class="parent">
    <div class="click">click here</div>
</div>

$('.click').on('click',function(){
    $(this).parent().next().toggleClass('on');
})

Comments

[退会済みユーザー]

今のままではvuejsを用いる理由が見受けられず回答しづらいため、なぜvuejsを用いたいのかを追記してほしいです。

[masa207]

ご返信ありがとうございます。現在nuxt.jsで作ったサイトでモーダルウィンドウを実装しておりまして、次へボタンを押したら次の要素にクラスを付けたり消したりしたいと思い質問させていただきました。$refsと#elで対応しているのですが、methods内のthisがクリックされた自分にしたいのですが、うまくいかない状況です。実際のコードは以下となります。
methods: {
next: function () {
this.$refs.modal_layer.classList.toggle('active')
},

[masa207]

一旦以下コードで対応しました。 next: function (index) { index.path[1].classList.remove('active') index.path[1].nextElementSibling.classList.toggle('active') }

Answer 1

  <div v-for="clickObject in clickObjectArray">
    <div class="parent" >
      <div @click="clickEvent(clickObject)"
           class="click "
           v-bind:class="{ on: clickObject.isClicked }" >
        click {{ clickObject.key }} 
        </div>
    </div>
  </div>

  data: {
    clickObjectArray: [
        {
          key: 0,
          isClicked: false
        },
        {
          key: 1,
          isClicked: false
        },
        {
          key: 2,
          isClicked: false
        }
      ]
  },
  methods: {
 		clickEvent: function (clickObject) {
      clickObject.isClicked = !clickObject.isClicked
    }
  }

clickObjectArrayには都合に合わせてデータを入れて、データの形に合わせてテンプレートも直してください。
動作確認は下記のFiddleから確認してください。

https://jsfiddle.net/yeondev/eywraw8t/419751/