【vue.js】初めてのvue.js ‘event’ is defined but never used.eslintno-unused-vars

Firebaseって便利

Androidのアプリを作成するときに、Googleから提供されているFirebaseというサービスを使用しています。広告や利用分析、データベースやホスティングを簡単に導入できます。今までは、広告(admob)や利用分析を使ってみていたんですが、データベースも触りたいと思っていました。

とりあえずTodo作ろう

ユーザー認証（Authentication）とデータベース(Realtime Database)を導入しました。ユーザー認証は、Firebaseのマニュアル読んでもよく判らない。ネットを探して、サンプルを見つけてほぼコピペで導入しました。実際に配信するまでには、ちゃんと理解しないといけないでしょう。

データベースに関しては、それほど難解な部分は無いようです。スマホ２台から、同じメールアドレスでログインすると、同じ情報が見れるようになります。当たり前と言えば当たり前ですが、チャットサービスを作ろうとする際には、必須な機能ですね。

WEBでも見たいよね。

複数のスマホで見れるなら、WEBでも確認できれば、もうちゃんとしたサービス。どうせなら、新技術を覚えちゃいましょうということで、Node.js、Vue.jsをインストール。

自動で作られるHelloWorld.vueを修正することで、動作確認をします。以下は、ネットを見ながら修正したもの。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button v-on:click="kick">kick me!</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {

    kick: function (event) {
      this.msg += " kick!";
    }   
  }
}
</script>

すると、

kick: function (event) {

の行で、エラーが発生。

(parameter) event: any
‘event’ is defined but never used.eslintno-unused-vars

eventって定義されているけど、使用されていないじゃん。というエラーですが、ううむ。ネットを見ても、普通に使われているんだけど。無視して実行しようとしたけれども、Failed to compile.が出てやっぱり動かない。

eslintという文法チェッカーの設定漏れからなと思い、

// eslint-disable-next-line no-unused-vars
kick: function (event) {

を記述したところ、動作するようになりました。次の行はチェックしなくていいですからという指示ですけどね。

次の目標は、vue.js上で、ユーザー認証とデータベースの使用です。