Vue.jsで作るお買い物リストのサンプルコード

お買い物リストアプリのサンプルコードです。

買い物商品と個数を入力すると買い物リストが作成されます。

また、削除機能が付いています。

実際のサンプルはこちら

VueとFirebaseコード集｜あめねこサンプルコード集

VueとFirebaseのサンプルコードに特化したサイト。あめねこサンプルコード集では、一つのページで動作確認とサンプルコードが閲覧ができるため初心者や入門者にもわかりやすくなっています。

code.ameneko.com

サンプルコード

<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>

解説

            <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>

v-modelで紐付けた「買うもの」と「個数」にデータを入れて、登録ボタンを押します。

@clickでinputメソッドを呼び出します。

        input(){
            var item = {name:this.name, number: this.number}
            this.shoppingList.push(item)
            this.name = ''
        },

input()でデータを配列にいれます。

this.shoppingList.push(item)

で配列に加えることができます。

this.name = ''

で入力した文字をクリアしています。

            <div class="shopping_list">
                <li v-for="(item, index) in shoppingList" :key="index">
                    {{item.name}}{{item.number}}個
                    <button @click="deleteItem(index)">削除</button>
                </li>
            </div>

配列shoppingListのデータをv-forでループさせて表示させるコードです。

<button @click="deleteItem(index)">削除</button>

で削除したいデータをdeleteItem(index)のindexを渡して呼び出します。

        deleteItem(index){
            this.shoppingList.splice(index, 1)
        }

こちらのメソッドで渡したindexの番号のデータを削除しています。

こちらで基本的なtodoリストの実装できました。