2019/07/03
以前、Vue.js の演習として TO DO リストに「削除機能」を追加しました。
今回は TO DO リストに編集機能をつけてみます。
前提知識
コーディングに入る前に必要な知識をここで確認します。
算出プロパティ
任意に処理を含めることのできるデータです。
例)算出プロパティ halfWidth
は、width
プロパティの半分のサイズを計算してその結果を値にする
JavaScript
HTML
HTMLからは以下のように使います。
v-for
リストを一覧表示する場合には「v-for」ディレクティブを使用します。
JavaScript
HTML
第一引数 (item) に要素、第二引数 (index) にインデックスが設定されます。
v-bind:key
ではリストを一意に判別するするためのkeyをバインドします。
v-model
v-modelディレクティブを使用すると入力フォームにデータプロパティをバインディングすることができます。
初期フォーカスの設定
Vue.js で初期フォーカスを設定する方法です。
HTML
ref属性
を指定すると JavaScript の getElementByID で取得したときのように element としてコントロールにアクセスできるようになります。
JavaScript
this.$refs.コントロール名
の形式でアクセスします。
配列操作
push()
配列の末尾に値を追加します。
splice()
配列の指定した位置に一つ以上の値を追加します。
- 第一引数:追加・削除する位置
- 第二引数:削除する要素の数
- 第三引数:追加する要素
作業手順
1.Vueインスタンス(データプロパティ)
データプロパティには次のようなものを定義します。
キー | 説明 |
---|---|
text | 編集欄の値 |
editIndex | 現在編集している要素のインデックス。編集状態でない場合は-1を設定 |
items | 要素のリストデフォルトで3つの要素を設定 |
2.Vueインスタンス(算出プロパティ)
3.Vueインスタンス(リスト操作用メソッド)
次のような機能を持ったメソッドを定義していきます。
機能 | 説明 |
---|---|
編集 | 指定した要素を編集状態に設定 |
クリア | 編集覧(状態)をクリア |
更新(追加) |
・編集状態の場合はその要素の内容を更新 ・編集状態でない場合は要素を追加する |
削除 | 指定した要素を削除する |
4.HTML(リスト操作用メソッド)
以上です。
基礎から学ぶ Vue.js
僕は基本的にネットで勉強しているのですが、最終的に知識を整理するために、この本を手にとって知識を整理しました。表紙のVロゴより目立っている「ねこちゃん」は本文中でもよく登場します。一部では猫本と呼ばれているそうですね。中もカラフルで図表も多く、とても読みやすかったです。当サイトは Laravel の解説サイトなので Vue.js の解説は端折っています。わかりずらいところがあるかもしれません。そういう方はこの本を読めば理解できるかと思います。

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。