Programming Journal

学習したことの整理用です。

Vue.js

【Vue.js】【Vuex】Storeを分割してモジュール化し、namespacedを登録する

実装したいこと Vuexのストアをモジュールに分割して読み込みたい。 アプリケーションの規模が大きくなると、ストアの規模も大きくなり管理が困難になるため、ストアを適切に分割し管理したい。 モジュール | Vuex モジュールを読み込む store/index.jsにま…

【Vue.js】Vue内でenumで定義した内容とリンクさせたい

セレクトボックスを生成するときに、enumで定義した内容とリンクさせたい。 select enum status: { todo: 1, doing: 2, done: 3 } option valueにenumで定義した内容を渡せばOK <div class="form-group"> <label for="status">ステータス</label> <select name="ステータス" class="form-control" id="status" v-model="task.status"> <option value="todo">TODO</option> </select></div>

【Vuex】雑多なメモ

編集時のデータの渡し方 タスク管理アプリで、タスクを編集するときのデータのやり取りについて詰まったのでメモ。 親からtaskデータをpropsで受け取り、v-modelでデータを入力値をバインドしたいです。 ただし、オブジェクトが格納された変数をコピーしても…

【Vue.js】【Vuex】雑多なメモ

詰まりに詰まってしまったので、メモを残しておきます。 子から親へデータを渡すとき まず、Vuexは使わない単純なやり方です。 子コンポーネントでタスク名・タスク説明文を入力し、親にデータを渡します。 そして親がAPIでその内容をPOSTします。 ※説明に必…

【Vue.js】モーダルウィンドウ

実装したいこと タスク一覧があり、それぞれのタスクタイトルをクリックすると、モーダルウィンドウでタスクの詳細が表示される。 データの流れ 細かいコード内容は省き、大まかな流れだけ追います。 データの流れの説明に必要な部分だけ切り取っているので…

【Vue.js】エラーメモ

同じミスを数回繰り返してしまったのでメモ エラー画面 「インスタンスで定義されていないのに、レンダーで参照されてるよ」とエラー vue.runtime.esm.js:638 [Vue warn]: Property or method "modalTask" is not defined on the instance but referenced du…

【Vue.js】Vue Routerを活用して画面遷移する

実装したいこと Vue Routerを使い、画面遷移機能を実装したいです。 タスク管理アプリで、トップ画面⇔タスク一覧画面と遷移できるように設定していきます。 Vue.jsは初めて使うので、データの流れが分からず実装に時間がかかってしまいました。復習していき…