vue-qrcodeを使って現在のページのURLをQRコードで表示してみます github.com インストール npm install @chenfengyuan/vue-qrcode vue typescriptで使うため型定義もインストール npm install @types/chenfengyuan__vue-qrcode plugins/vueQrcod.tsを作成し…

結論 使えなかった vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: sitcky 以下、試した手順 スクロール時に特定の部分を固定するためのライブラリ vue-sticky-directive をNuxtプロジェクトに導入してみる github.com インストール…

コンポーネントのDOMを参照したい場合 this.$refs.myComponent.$el で取得できる qiita.com

仮想スクロールライブラリであるvue-virtual-scrollerを使ってみる チャットとか大量のリストを表示するときに表示されているところだけdomを作ってくれる系のライブラリ github.com インストール npm install --save vue-virtual-scroller typescript用に型…

vue-clipboard2を利用する github.com プロジェクトに追加 npm install --save vue-clipboard2 plugins/vueClipboard.tsを作成 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) nuxt.config.tsに作成したpluginを追…

bootstrap-vue.js.org <template> <div> <b-form-select v-model="selected" :options="options" @change="handleSelectChanged"></b-form-select> </div> </template> <script> export default { data() { return { selected: null, options: [ { value: null, text: 'Please select an option' }, { value: 'a', text: 'T…

Vue - CodeSandbox とても便利だった！ 前回の記事もこれを使いながら確認しました remoter.hatenablog.com codesandbox.io

以下のように@keydown.enterだとsafariのときに変換確定時にhandleEnterが呼ばれる <template> <div id="app"> <input name="text" @keydown.enter="handleEnter"> </div> </template> <script> export default { name: "App", components: {}, methods: { handleEnter: () => { console.log("enter"); } } }; </script> @keypress.enterを使えば変換確定時は…

ja.nuxtjs.org npx create-nuxt-app sampleapp create-nuxt-app v2.10.1 ✨ Generating Nuxt.js project in sampleapp ? Project name sampleapp ? Project description My first-rate Nuxt.js project ? Author name remoter ? Choose the package manager N…

すごく丁寧にまとめてくれてる人がいた lab.astamuse.co.jp Vue.jsだけのライフサイクルは公式より jp.vuejs.org asyncData や fetch と beforeCreate や created でどれを使うべきかみないな悩むことがあるので 用途によって使い分ける必要があるかなぁと思…

以下で検索すると Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated 同様のワーニングを解決して…

pushjs.org デスクトップ通知を行うためにPush.jsを導入して実装してみます インストール npm install push.js --save 使い方は import Push from 'push.js' Push.create('Hello World!') import して Push.createを呼ぶだけだった optionは公式のドキュメン…

配列の場合は以下のようになる（公式より） <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 結果： Foo Bar Objectの場合は v-forの左辺に入る値に valueとkeyを入れ…

regexを利用して正規表現でチェックする validation-provider(:rules='{required: true, regex: /^[0-9]{3}[-][0-9]{4}$/}' v-slot="{valid, errors}" name='郵便番号') b-form-group(label='郵便番号') b-form-input(type='text' name='postcode' v-model='…

よくある利用規約とかの必須なチェックボックスをvee-validateで書くとこんな感じになる <template lang="pug"> div validation-provider(rules='required|email' v-slot="{valid, errors}" name='メールアドレス') b-form-group(label='メールアドレス') b-form-input(type='emai</template>…

created で document.getElementByIdを使って取得しようとしたが、 タイミング的にまだ描画されていないので$nextTick()を使う必要があった また、getContextを呼ぶ時に Property 'getContext' does not exist on type 'HTMLElement'. とエラーが出るので HT…

公式ドキュメントのサンプルをvue-property-decoratorで使って書き直してみる フィルター — Vue.js 素のvue.jsの場合 <template> <p>{{ message | capitalize }}</p> </template> <script> module.exports = { data: function () { return { message: 'hellow' } } filters: { capitalize: functi…

今回は単純に日付のFrom Toではなくて現在の日付から算出した年齢が特定の範囲の日付しか入力できないようにしたいのでカスタムルールを作成した 公式のドキュメントを参照しながら以下の様なルールを作成 Basics | VeeValidate import { extend } from 'vee…