search
LoginSignup
12
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated 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で内容を編集できたりすると良さそうです。 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
12
Help us understand the problem. What are the problem?