【Vue初心者向け】超シンプルなお買い物リストアプリを作る

Vue.jsで作ったシンプルなサンプルコードです。

対象者は、Vue.jsを始めたところで、色々サンプルコードをいじってみたい人です。

商品名、個数を入力して登録すると買い物リストが表示されます。重要な機能のコードが分かるよう、エラー処理はしていません。

実際に動作はこちらで確認できます。
お買い物リストアプリ

<template>
    <div class="shopping_component">
        <section>
            <div class="input_data">
                <p>買うもの：<input v-model="name" type="text" placeholder="買うもの"></p>
                <p>個数：<input v-model="number" type="text" placeholder="個数"></p>
            </div>
            <button @click="input">登録する</button>
        </section>
        <section>
            <div class="shopping_list">
                <li v-for="(item, index) in shoppingList" :key="index">
                    {{item.name}}{{item.number}}個
                    <button @click="deleteItem(index)">削除</button>
                </li>
            </div>
        </section>
    </div>
  
</template>

<script>
export default {
    data(){
        return{
            name: '',
            number: 1,
            shoppingList: []
        }
    },
    methods:{
        input(){
            var item = {name:this.name, number: this.number}
            this.shoppingList.push(item)
            this.name = ''
        },
        deleteItem(index){
            this.shoppingList.splice(index, 1)
        }
    }
}
</script>

<style scoped>

</style>

ポイントは、配列をv-forで表示する時にindexにつけることです。indexをつけておけば、削除ボダンにこのindexを渡すことで簡単に該当する項目を削除できます。
splice(index,1)は「index番目から始める要素を1つ削除してね」という意味です。

宣伝：ブログやっています→ ブログ