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

はじめに

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

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

したいこと

前回から大きく変わらず

Vuetifyを使いこなす

全体

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
  }
},

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

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

調べてみた。

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

asuncDataメソッドについて

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

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

非同期なデータについて

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

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

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

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

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

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

現状

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

今後すること

・デプロイテスト

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

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

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

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

その他参考にしたサイト

methodsとcomputedの使い分け