ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

Vue.js+Vuetifyの便利コンポーネント紹介① snackbar編(ログイン時や投稿時のエフェクトに便利)

Vue.js で便利なマテリアル UI である Vuetify で魅力的なコンポーネントを紹介していくコーナーです。

https://vuetifyjs.com/en/components/snackbars#snackbars

基本的に公式ドキュメントの要約となっています。

Vue.js に慣れていない段階で Vuetify を使うとアレ?ってなることが多いと思うので、ぜひ参考にしていただければと思います。

「どこに」「なにが」書かれているか慣れてくると他のコンポーネントも使えるようになります。

オススメの Vue の本

実証環境

Vue 2.5.17
Vuetify 2.2.3

Snackbar ってどんなやつ?

こんなやつ。

Snackbarのサンプル画像

数秒間浮き出てきて、勝手に消える。もちろん CLOSE を押しても消える。

ちょっとしたお知らせとかに使えます。ログインしましたとか。

基本的な使い方

<v-btn @click="snackbar = true">これを押すと点火</v-btn>
  <v-snackbar v-model="snackbar">
          こんなやつ
          <v-btn color="pink" text @click="snackbar = false">Close</v-btn>
  </v-snackbar>

~~~

data(){
  return{
        snackbar: false
    }
}

これだけで使えます。

v-model で定義した snackbar というデータが true なら表示されるようになります。

便利だ。

仕様を見てみよう

仕様という見出しにしましたが、ようは「初期設定みたいな感じ」

Snackbarのサンプル画像

ここに初期設定が書いてあります。

例えば、

Snackbarのサンプル画像

ここには、timeout がデフォルトで 6000 と定義されています。

つまり、6 秒で表示が消えるってことですね。

Vuetify はこういう点がほかのマテリアル UI より見やすい気がしています。

ほかにも top false と書いてある部分とか、true にしたら「上部に表示されそうだな」という予想がなんとなくついてきます。

やってみましょう。

Snackbarのサンプル画像

上に表示されました。背景が白で見にくいけど。間違いなく上に表示されています。

        <v-snackbar v-model="snackbar" :top="true">
          {{ text }}
          <v-btn color="pink" text @click="snackbar = false">Close</v-btn>
        </v-snackbar>

このように:top=“true”とやるだけで上に表示されます。便利。

応用してみよう

現時点は、ボタンを押したら表示されるという感じになってしまっている。

例えば、この画面が表示にされたら、Snackbar を表示するみたいな感じをやってみます。

<template>
  <div>
    <template>
      <div class="text-center ma-2">
        <!-- <v-btn dark @click="snackbar = true">Open Snackbar</v-btn> -->
        <v-snackbar v-model="snackbar" :top="true">
          {{ text }}
          <v-btn color="pink" text @click="snackbar = false">Close</v-btn>
        </v-snackbar>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "表示されたよ!",
      snackbar: false
    };
  },
  created() {
    this.show();
  },
  methods: {
    show: function() {
      this.snackbar = true;
    }
  }
};
</script>

このコードで、この画面が表示されたらスナックバーが表示されるようになりました。

どういうことかというと

  created() {
    this.show();
  },
  methods: {
    show: function() {
      this.snackbar = true;
    }
  }

この部分で、snackbar を true にしてるからですね。

例えばログイン後に表示されるページにこれを設置すれば、ログインしました!みたいなことができます。

さらに応用してみよう

axios でデータ送信した際に表示しましょう。

<template>
  <div>
    <template>
      <div class="text-center ma-2">
        <!-- ボタンを押したら送信。今回は送信先を用意してないので絶対にエラーが帰ってくる -->
        <v-btn dark @click="send()">Open Snackbar</v-btn>
        <v-snackbar v-model="snackbar" :top="true">
          <!-- 表示したいメッセージがここに入る -->
          {{ message }}
          <v-btn color="pink" text @click="snackbar = false">Close</v-btn>
        </v-snackbar>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "表示されたよ!",
      snackbar: false,
      text: "データ送信する内容",
      message: "エラーメッセージ"
    };
  },
  created() {
    this.show();
  },
  methods: {
    send: function() {
      axios
        .post("/url", {
          text: this.text
        })
        .then(res => {
          // 送信成功はこの中
          this.message = "送信しました";
          this.snackbar = true;
        })
        .catch(err => {
          // 送信失敗はこの中の処理
          this.message = "失敗しました";
          this.snackbar = true;
        });
    }
  }
};
</script>

Snackbarのサンプル画像

今回は API を用意していないので(めんどいから)絶対にエラーが帰ってきますし、フロント側で指定していますが、

例えばエラーメッセージをレスポンスで返したものを message に入れれば、自由自在に表示を変えれます。

これはサーバー側の話になってきてややこしいと思うので、今回は「自由度がある」って感じで色々試してほしいなと思います。

⇨Vuetify の Snackbar を Vuex で定義してどこでも使い回す方法はこちらの記事

オススメの Vue の本