dockerでnginxの変更が反映されない
多分volume削除して作り直せばいけるけど、こんな対応で更新できた。
docker images docker rmi [image id] docker volume ls docker volume rm [volume id] docker-compose build proxy
vue v-scroll スクロールイベントのメモ
最後尾でイベントを発火させる方法
<v-btn
v-show="showBtn"
v-scroll="onScroll"
fab
dark
depressed
@click="$vuetify.goTo(to)"
>{{ label }}</v-btn>
private onScroll(e: any) {
if (typeof window === 'undefined') return
const { scrollTop, clientHeight, scrollHeight } = e.target.scrollingElement
if (scrollTop + clientHeight >= scrollHeight) {
this.showBtn = false
return
}
this.showBtn = true
}
nuxtに外部スクリプトを埋め込んだときのメモ
defer: 非同期 body: フッターに埋め込む
head() {
return {
titleTemplate: null,
__dangerouslyDisableSanitizers: ['script'],
script: [
{
hid: 'conversion-analytics1',
src:
'https://xxxx.com/tagjs/ConversionTags.min.js',
defer: true,
body: true,
},
{
hid: 'conversion-analytics2',
innerHTML: `
document.addEventListener('DOMContentLoaded', (event) => {
conversionTag.run();
})
`,
type: 'text/javascript',
charset: 'utf-8',
body: true,
},
],
}
},
vscode + docker + eslint + prettier の開発環境構築メモ
prettierがnode_modulesにないとエラーをはいた。
コンテナでインストールされてるnode_modulesがホスト側にマウントされてないことが原因。
macにnode入れてとか汚染したくないので他の方法を模索…
docker-composeでyarn installするのは起動遅くなって嫌だし、、、
結局コンテナ側にあるnode_modulesをホスト側にコピーすることにした。
docker-compose -f docker-compose.local.yml run --rm -v $PWD/node_modules:/app/node_modules -w /app [web] yarn install
これでホスト側にnode_modulesをコピーできるので、vscode + docker + eslint + prettierを汚染することなく使える。
あとは、vscodeワークスペースのsettings.jsonに以下を書いたら動いた。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.configPath": "./node_modules/prettier",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
"eslint.codeAction.showDocumentation": {
"enable": true
}
}
nuxtjsで画面遷移するとストアーのデータが書き換わるのでエラーになる件の対応
ほぼ同じ内容で、同じstoreを使いまわしてるページで画面遷移すると、キーは同じだけどバリューの内容が変わるのでエラーになる。
例えばA to Bの場合、Bのfetchが完了後に、ストアが変わるのでAが再レンダリングされてから、Bがレンダリングされて遷移するという流れになるみたい。
これに関しては、おそらくスライドアニメーションなどにも対応するために、この挙動になっているのだろうと予想…
バグではないらしい
で対応方法として、、、
共通処理 plugins/router.js でbeforeEachとか使って遷移中ですよフラグを更新して、再レンダリングを防ぐ これすると、コードがシンプルになっていい感じ
ストアの中身をページごとに分割する 同じストアだけど、データをページごとに分割して、getterとかで取得分けする これすると、スライドアニメーションとかにも対応できる でもちょっとめんどくさい
その他 思いつかず
案件によって使い分けるのがいいかな
