技術関連 - Vue.js
結論 v-modelを使わず、 「初期値設定(v-bind)」と「変更を検知して代入(changeイベント)」のように、 処理を分ければOKでした。
プロジェクトルートURL(例: localhost:3000 or localhost:3000/)でアクセスされたら、 特定のページ(例: /articles)に遷移させたい。 (プロジェクトルートのページを変更したい) .Nuxt/配下のrouter.js内にあるbaseプロパティや、 path: '/' の箇所を見て…
解決策 getの場合は、 第二引数にheaders: をキーとして、 指定したいヘッダのオプションを渡せばOK。 this.$axios.get(url, { headers: { "Content-Type": "application/json", "Accept": "application/json" }}) postの場合は、 第三引数にheaders: をキー…
クリックで実行される関数に、引数を渡したい。 1、v-onもしくは@clickで指定する関数に、 v-on:click="someFunction(引数)" @click="someFunction(引数)" のように引数を設定する。 // component.vue Delete Task 2、methods側の関数で、 function(1で設定…
開く this.$bvModal.hide(modalのid) 閉じる this.$bvModal.show(modalのid) bootstrap-vue-modalリファレンス 1、modalを開くボタンと、開閉したいmodalを作成 // some_component.vue // ボタン ログイン // 開閉したいmodal // modalの中身 2、引数で指定…
1、共通化したいmethodsやcomputed等を記述したファイルを作成する。 例として utils.js を作成します。 パスは javascript/packs/mixins/utils.js とします。 以下は、moment.jsで日時をparseする関数です。 # utils.js import moment from 'moment' expor…
手順 1、computedに、moment.jsでフォーマットする処理を記述 // component.vue computed: { // 開始日時 startParse: function() { return moment(this.task.start).format('YYYY-MM-DDThh:mm') }, // 終了日時 endParse: function() { return moment(this.…
checkboxをチェックした時のイベントについて checkboxをチェックした時のイベントは、 change イベントで発生する。 clickでは反応しないので注意。 hogefuga
スマホで日本語を確定入力した時に、動作しないことが発覚。 調査すると、 keyupイベントが動いていないことが原因。 inputイベントに変更することで対応出来ました。
現在のパスは、 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の入力エリアに、今日の日付を初期値で入れたい サンプルコード サンプルコード // 関係箇所のみ抜粋しています。 <template> //</template>…
1、共通化したいmethodsやcomputed等を記述したファイルを作成する。 例として utils.js を作成します。 パスは javascript/packs/mixins/utils.js とします。 以下は、moment.jsで日時をparseする関数です。