v-listの要素をCRUDするサンプルコード

Vuetifyの v-list の要素を追加・読取・更新・削除するサンプルコードを書いてみました。
公式サンプルだけだと1か所に情報がまとまっていなかったので。

Vuetifyのバージョンは1.5系です。
2.0系で使う場合は、v-list-tile を v-list-item に変えれば動くかと思います。

See the Pen v-list example by shozzy (@shozzy) on CodePen.

内容

• 追加（Create）：タイトルバー右端の＋を押すと、リストの要素が1つ増えます。¹
• 読取（Read）　：各要素のボタン以外を押すと、その内容がalertで表示されます。²
• 更新（Update）：各要素の＋を押すと、内容の末尾に＋が付け足されていきます。³
• 削除（Delete）：各要素のごみ箱アイコンを押すと、その要素が削除されます。

あわせて、インデックスつきのv-forや、各要素をv-dividerで区切る方法のサンプルも入っています。

#コード
ここにもコードを貼っておきます。
（CodePen用のHTMLとJavaScriptです。Vue.jsの単一ファイルコンポーネントにはなっていません。）

HTML

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <v-layout row>
        <v-flex xs12 sm6 offset-sm3>
          <v-card>

            <v-toolbar color="light-blue" dark>
              <v-toolbar-title>
                sample
              </v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn icon>
                <v-icon @click="createItem()">playlist_add</v-icon>
              </v-btn>
            </v-toolbar>

            <v-list>
              <template  v-for="(item, index) in items">
                <v-list-tile     
                  :key="index"
                  @click="showAlert(readItem(index))"
                >
                  <v-list-tile-content>
                    <v-list-tile-title>
                      {{ item.title }}
                    </v-list-tile-title>
                  </v-list-tile-content>

                  <v-list-tile-action>
                    <v-btn icon>
                      <v-icon @click.stop="updateItem(index)">
                        add
                      </v-icon>
                    </v-btn>
                  </v-list-tile-action>

                  <v-list-tile-action>
                    <v-btn icon>
                      <v-icon @click.stop="deleteItem(index)">
                        delete
                      </v-icon>
                    </v-btn>
                  </v-list-tile-action>

                </v-list-tile>
                <v-divider
                  v-if="index + 1 < items.length" 
                  :key="`divider-${index}`"
                >
                </v-divider>
              </template>
            </v-list>

          </v-card>
        </v-flex>
      </v-layout>
    </div>
  </v-app>
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        {title: "title1", value: "value1", detail: "detail1"},
        {title: "title2", value: "value2", detail: "detail2"},
        {title: "title3", value: "value3", detail: "detail3"}
      ]
    }
  },
  methods: {
    createItem(){
      title  = "title"  + (this.items.length+1)
      value  = "value"  + (this.items.length+1)
      detail = "detail" + (this.items.length+1)
      this.items.push({title: title, value: value, detail: detail})
    },
    readItem(index){
      return JSON.stringify(this.items[index])
    },
    updateItem(index){
      item = this.items[index]
      item.title  = item.title  + "+"
      item.value  = item.value  + "+"
      item.detail = item.detail + "+"
    },
    deleteItem(index){
      this.items.splice(index, 1)      
    },
    showAlert(message){
      alert(message)
    }
  }
})

1. 追加できることだけを示したいので、内容は適当です。itemsの要素数＋1の数字を末尾に追加した固定文字列を、title、value、detailの3項目にセットするだけになっています。 ↩

2. v-dialogなどを使ってきれいに表示すると良さそうですが、サンプルが長くなるのでやめました。 ↩

3. こちらもReadと組み合わせて、v-dialogで内容を編集できたりすると良さそうです。 ↩