【Nuxt.js】ブログ作成の記録⑤ ~Vue.jsで基本に立ち返る(v-on実装の戦い※失敗)~

はじめに

前回に引き続きブログ作成の格闘記です。

【Nuxt.js】ブログ作成の記録④ ~引き続きVuetifyを使ってみた~

したいこと

前回から大きく変わらず

Vuetifyを使いこなす

全体

プロフィールはカードではなくもっとそれっぽく!笑

カルーセルで画像表示をスライドしておしゃれに!

タグ表示

CSSの改善・レスポンシブ対応

カードはHorizontal cardsで!!

ボトムナビゲーション

Popupの実装

JSの比較演算子なりVue.jsのmethodsを組み合わせればいけそう。。。

Vue.jsで基本に立ち返る~v-onの実装~

v-onの実装(ポップアップ実装)

前回に引き続きチャレンジです。

①必要最低限の実装でテスト(猫本P59 参考)

テンプレート側

<p>{{count}}回クリック!!</p>
<button @click="increment">増やす</button>

スクリプト側

data(){
  return {
    count :0
  }
},
methods: {
  increment: function() {
    this.count += 1
  }
},

変わらない。(動かな過ぎて不安になってVueでやってみたらこちらは動いた。。。)

②JavaScriptのdispatchEvent、jQueryのvalメソッド (猫本P117参考)

こちらを見てjQueryだとライブラリをCDNなりで取得しないといけないことに気付く。

コチラで試みようとする。

。。。

書き方がわからない。。。泣

スクリプトタグ内にコピペするもエラーでビューが表示されず。。。ただvalメソッドを知ったのでよしとしよう。。。

③v-modelを使う (猫本P122)

テンプレート側

<input v-model.number="width">{{width}}
<input v-model.number="halfwidth">{{halfwidth}}

スクリプト側

data(){
  return {
  width: 800,
},
computed: {
  halfwidth: {
    get: function () {return this.width /2},
    set: function (val) {this.width = val*2}
  }
},

ここにきてゲッターとセッターを初めて使った。そして先ほど知ったvalがここで登場。(引数なのでメソッドではないけど笑)

ブログ作成と離れちゃってるけど普通に楽しい。やっと理解し始めた。笑

こちらもやってみたけどNuxtでは変わらず動作せず。。。SPAとSSRの違いあたりが原因かなと思い始める。

④asyncData (NuxtビギナーズガイドP97参考)

テンプレート側

<input type="checkbox"v-model="click" value="チェック">
<label>{{buttontext}}</label>

スクリプト側

asyncData(){
  return {
    click: false,
  }
},
computed: {
  buttontext() {
    return this.click ? '新規登録' : 'ログイン'
  }
},

正直これだったら動くんじゃないかな??と期待していたけどだめだった。。。ログインと表示されている。

asyncDataだとtrueにしてもログインになってしまっていたけどdataに変えてtrueだと新規登録と表示された。

⑤@click (NuxtビギナーズガイドP157参考)

テンプレート側

<p v-show="clicked">clicked</p>
<button type="button" @click="handleClick">click</button>

スクリプト側

data(){
  return {
    clicked: false,
  }
},
methods: {
  handleClick(){
  this.clicked = true
  }
},
クリックするとclickedと表示される。Vue側では実装できたけど、Nuxtでは実装できず。。。omg

 

⑥pagesディレクトリ内で実装

ここで少し気になった点が。。。もしかしてlayout.vueで実装しているのがよくない??

調べてみた。

ビューについて(てか下記、今更URLで画像引っ張ってこれることに気付いた。。。笑)

asuncDataメソッドについて

asyncData はコンポーネント(ページコンポーネントに限ります)がロードされる前に毎回呼び出されます。

上記の記載が!!asyncDataの結果はdataとマージされるとのことで、どうやらdata内に値が入っていてもasyncDataのデータが優先されるぽい。

非同期なデータについて

ただそもそもasyncDataはaxiosやらAPI使う際に使うデータっぽいことに気付き始める。原因は別にある??

コンポーネント内で非同期データを扱うには?

コンポーネント内ではasyncDataは持たない??APIコールが必要らしい。

とここで、若干原因が違う気がしたのでとりあえず。。。

layouts/default.vueからpages/test.vue(componentsディレクトリでも試した)に移してこれまでやったことを再度試してみたが動かず。。。笑

ディレクトリは関係ないことがわかりました。omg

現状

前回から見た目は何も変わらず。。。

所感・気づき・メモ

所感

今回もv-on実装には至らず・・・引き続き頑張ります。。。

気づき&学び

・Shift+Windows+数字でソフトウェア起動できることに気付く。笑

・dataをDataと大文字にすると反応しなくなる。

・Universal(SSR)はサーバ側でレンダリングを行い、SPAはブラウザ側でレンダリングを行う。

・fetchはVuex(Store)を使う際に実装するみたい。

メモ

今後すること

・デプロイテスト

・axiosをアプリ生成時に選択していなかったのでインストールしてみる(API)

こちら参考。asyncDataはサーバ側で行う処理でコンポーネントのdataプロパティの設定を行うことができるらしい。求めているのはまさにこれじゃね??ってことで試す!!

こちらにはこのような記載。コンポーネントのロード毎に実行されます。Vuexストアのデータを使わずにデータを取得し、レンダリングの前に、非同期処理を行ってくれます。

こちらでは、asyncDataは外部からデータを取得し、ページコンポーネントへ直接セットすることを目的として使用される。と記載。

その他参考にしたサイト

methodsとcomputedの使い分け

コメントを残す