目次
はじめに
前回に引き続きブログ作成の格闘記です。
したいこと
前回から大きく変わらず
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
現状
前回から見た目は何も変わらず。。。
所感・気づき・メモ
所感
今回もv-on実装には至らず・・・引き続き頑張ります。。。
気づき&学び
・Shift+Windows+数字でソフトウェア起動できることに気付く。笑
・dataをDataと大文字にすると反応しなくなる。
・Universal(SSR)はサーバ側でレンダリングを行い、SPAはブラウザ側でレンダリングを行う。
・fetchはVuex(Store)を使う際に実装するみたい。
メモ
今後すること
・デプロイテスト
・axiosをアプリ生成時に選択していなかったのでインストールしてみる(API)
こちら参考。asyncDataはサーバ側で行う処理でコンポーネントのdataプロパティの設定を行うことができるらしい。求めているのはまさにこれじゃね??ってことで試す!!
こちらにはこのような記載。コンポーネントのロード毎に実行されます。Vuexストアのデータを使わずにデータを取得し、レンダリングの前に、非同期処理を行ってくれます。
こちらでは、asyncData
は外部からデータを取得し、ページコンポーネントへ直接セットすることを目的として使用される。と記載。
コメントを残す