Edited at

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つ増えます。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)
}
}
})





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



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



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