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

vue
スポンサーリンク

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

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

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

実際のサンプルはこちら

サンプルコード

<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リストの実装できました。

コメント

タイトルとURLをコピーしました