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

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

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

<p class="codepen" data-height="400" data-theme-id="0" data-default-tab="html,result" data-user="shozzy" data-slug-hash="rbBgyP" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="v-list example">
  <span>See the Pen <a href="https://codepen.io/shozzy/pen/rbBgyP/">
  v-list example</a> by shozzy (<a href="https://codepen.io/shozzy">@shozzy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

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

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

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



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

```vue: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: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)
    }
  }
})
```