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つ増えます。1
- 読取（Read） ：各要素のボタン以外を押すと、その内容がalertで表示されます。2
- 更新（Update）：各要素の＋を押すと、内容の末尾に＋が付け足されていきます。3
- 削除（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)
}
}
})