Nuxt.js でクリック時に関数を実行する

サンプルコード

<template>
<div id="onclickTest">
  <button v-on:click="alert">クリック要素</button>
</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    alert: ()=> {
      alert("hoge");
    }
  }
};
</script>

<style>
</style>

対象の要素でv-on:click="alert" を定義し、クリック時にmethods: 内にある定義済みalert を呼びだしている。

ちなみにv-on:click="alert" は @click="alert" で代替OK。

良く使用する「クラスをトグルする」挙動

<template>
<div id="onclickTest">
  <button @click="toggleClass">クリック要素</button>
</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toggleClass: ()=> {
      const button = document.querySelector('button');
      button.classList.toggle('is-active')
    }
  }
};
</script>

<style>
</style>

これでクラスをトグルすることができる。

これでCSS と兼ね合わせてなんでもできる……、はず。

methods: {} については別記事で。