スリ飯屋MaLankaのフリーエンジニアな日々

このブログでは、フリーランス5期目となる自身の実体験から、フリーランスエンジニアになるためのノウハウ、ブログや沖縄移住、スリランカの最新情報について発信します。

技術関連 - Vue.js

【Vue.js】v-modelでcheckboxの値の変更が反映されない

結論 v-modelを使わず、 「初期値設定(v-bind)」と「変更を検知して代入(changeイベント)」のように、 処理を分ければOKでした。

【Vue.js Nuxt.js】プロジェクトのrootpathを特定のページへ変更する

プロジェクトルートURL(例: localhost:3000 or localhost:3000/)でアクセスされたら、 特定のページ(例: /articles)に遷移させたい。 (プロジェクトルートのページを変更したい) .Nuxt/配下のrouter.js内にあるbaseプロパティや、 path: '/' の箇所を見て…

【Nuxt Vue Rails】axiosのContent-Typeがappliation/jsonにならない

解決策 getの場合は、 第二引数にheaders: をキーとして、 指定したいヘッダのオプションを渡せばOK。 this.$axios.get(url, { headers: { "Content-Type": "application/json", "Accept": "application/json" }}) postの場合は、 第三引数にheaders: をキー…

【Vue.js】clickで実行されるmethodsに引数を渡す

クリックで実行される関数に、引数を渡したい。 1、v-onもしくは@clickで指定する関数に、 v-on:click="someFunction(引数)" @click="someFunction(引数)" のように引数を設定する。 // component.vue Delete Task 2、methods側の関数で、 function(1で設定…

【Vue.js BootstrapVue】methodsでmodalをopen、closeする

開く this.$bvModal.hide(modalのid) 閉じる this.$bvModal.show(modalのid) bootstrap-vue-modalリファレンス 1、modalを開くボタンと、開閉したいmodalを作成 // some_component.vue // ボタン ログイン // 開閉したいmodal // modalの中身 2、引数で指定…

【Vue.js】methodsやcomputedを共通化(mixin)する

1、共通化したいmethodsやcomputed等を記述したファイルを作成する。 例として utils.js を作成します。 パスは javascript/packs/mixins/utils.js とします。 以下は、moment.jsで日時をparseする関数です。 # utils.js import moment from 'moment' expor…

【Vue.js】computedとmoment.jsで日時をフォーマットする

手順 1、computedに、moment.jsでフォーマットする処理を記述 // component.vue computed: { // 開始日時 startParse: function() { return moment(this.task.start).format('YYYY-MM-DDThh:mm') }, // 終了日時 endParse: function() { return moment(this.…

【Vue.js】checkboxでclickイベントが反応しない

checkboxをチェックした時のイベントについて checkboxをチェックした時のイベントは、 change イベントで発生する。 clickでは反応しないので注意。 hogefuga

【Vue.js】スマホで日本語入力時、keyupイベントが動作しない

スマホで日本語を確定入力した時に、動作しないことが発覚。 調査すると、 keyupイベントが動いていないことが原因。 inputイベントに変更することで対応出来ました。

【Vue.js】 現在のパス(URL)を取得する 【Vue-Router】

現在のパスは、 this.$route.path で取得出来る。 リファレンス https://router.vuejs.org/ja/api/#router-onerror 例、現在のパスによってリダイレクト先を変える関数 # js:some_component.vue redirectToRoot: function() { // 現在のパスを取得 console.l…

【bootstrap-vue】input type=datetime-localの入力エリアに、今日の日付を初期値で入れたい

bootstrap-vueの、input type=datetime-localの入力エリアに、今日の日付を初期値で入れたい bootstrap-vueの、input type=datetime-localの入力エリアに、今日の日付を初期値で入れたい サンプルコード サンプルコード // 関係箇所のみ抜粋しています。 <template> //</template>…

【Vue.js】methodsやcomputedを共通化(mixin)する

1、共通化したいmethodsやcomputed等を記述したファイルを作成する。 例として utils.js を作成します。 パスは javascript/packs/mixins/utils.js とします。 以下は、moment.jsで日時をparseする関数です。