Vue.js
Vue Fes Japan 2023 vuefes.jp 先日のVue Fes Japan 2023にてLT枠で登壇させて頂きました。 ボランティアスタッフもさせて頂けて、沢山の方とお友達になれて最高の経験が出来ました。 今回は5分のLT枠でしたが、次回は30分の枠で登壇出来るように頑張りたい…
結論 script setupを使ってコンポーネント名を定義することが出来ないので、もう一つscriptタグを書いてそこで export default する Sample.vue <script> export default { name: 'Sample', } </script> <script setup lang="ts"> ・・・ </script> <template> <div> ・・・ </div> </template>
結論 📝 shallowMount(mount) のプロパティの mocks の中に $nuxt -> context -> mockしたいコンテキスト の順番で定義すれば良い describe("Component", () => { let localVue: typeof Vue; let wrapper: ReturnType<typeof shallowMount<Vue>>; beforeEach(() => { localVue = createL</typeof>…
結論 プロジェクト直下に SVGファイルをテスト実行時にパースするファイル (svgTransform.js) を定義して、Jestでそれを読み込むようにする github.com 各パッケージのバージョン nuxt@2.15.8 vue@2.6.14 @vue/test-utils@1.3.3 @vue/vue2-jest@29.2.0 jest@…
概要 Nuxt.jsの2系でモーダルを実装する際にモーダルの開閉フラグをv-modelで管理する際のイベント発火させる動作がややこしかったので今回はそれをまとめます。 結論 inputイベントでなくても v-model を使う場合は、 親コンポーネントで指定した v-model="…
起こったこと qrcode というnpmパッケージを型定義パッケージと一緒にインストール。 $ npm install --save @types/qrcode $ npm install --save qrcode しかし、VSCode上では import { toDataURL } from "qrcode"; の 部分のモジュールが見つからないという…
概要 Propsにプリミティブな型以外を指定したい時の方法を定期的に忘れるので今回はその備忘録です... 結論 📝 PropType型 を '@nuxtjs/composition-api' からimportして PropType<指定したい型> で定義する <script lang="ts"> import { defineComponent, PropType } from '@nux…
概要 HTML5の標準バリデーションのON / OFFをVue.jsのバインドで操作する方法が、明示的に記載されてる記事がネット上に見つからなかったのでここにメモしておきます developer.mozilla.org やりたいこと 住所1(市区町村) と 住所2(番地・建物名) それぞれの…
概要 自分用メモです📝 方法 Settings の Add External Scripts/Pens に Vue と入力します。 コードを貼ってみます。 <div id="app"> <label>名前： <input type="text" v-model="name" /> </label> <p>入力された値：{{upperName}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
はじめに めちゃめちゃレベルの低い内容ですが、久々で記憶が消滅していたので忘れないためにここに記します。 ちなみにセキュリティソフトによっては 8080のポートが使えない場合があるっぽいので、今回はその対応のためにデフォルトのポートを変更するとい…
Vee Validateって？ Vue.js公式バリデーションライブラリです。 https://baianat.github.io/vee-validate/ 知らんかった... Vee Validateでイベント指定してバリデーションの発火タイミングをコントロール出来るなんて... こんなの普通に考えたら、そういう…
問題の概要 Vue.jsの@clickイベントでサーバーサイドにPOSTして、正常に完了した場合に画面をロードせずに一部のDOMを更新して送信完了表示したい。 しかし、画面が送信前の画面に戻ってしまってDOM更新後の画面にならない！？ サーバーサイドはステータス20…
要旨 Vue.jsにはDOMのライフサイクルごとに行いたい処理を定義しておくことが出来ます。なお、ライフサイクル関数は、Railsで言う before_action などのコールバックメソッドみたいなものです。 想定ケース 1. 画面を描画した時点でRailsのAPIを叩く 2. 取得…
動作検証した各ライブラリバージョン Rails : 4系(5系でも問題なく動きそう) Vue.js : 2.5.13 注意 サンプルコードは実際のコードを抽象化したものであるため雑に抽象化されて分かりにくいかもしれません 想定されるアプリの構成 gem 'webpacker' を使用して…
