Waplusテックチームブログ

よく参照するのをわかりやすくまとめよう！

Waplusテックチームブログ

Vue.jsで複数のselectで選択されている値を取る

by · 2019年6月17日

言葉では難しいのですが商品A、商品B、商品Cが並んでいてselectで個数を選択してお問合せ。

もしくはカートへ入れる。などの処理をVue.jsでしようと思います。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <h1>カートに入れる：お問合せ</h1>
        <div id="selectOption">
            <div v-for="item in 商品一覧">
                <h5>{{ item.商品名 }}</h5>
                <div>在庫数{{ item.在庫 }}</div>
                <select v-model="item.注文数">
                    <option value="0">0</option>
                    <option v-for="n in item.在庫" v-bind:value="n">{{ n }}</option>
                </select>
            </div>
            <br>
            <button v-on:click="cartIn">カートに入れる</button>
        </div>

        <div id="cartApp">
            <div>カートの中身</div>
            <div>{{ cart }}</div>
        </div>

        <script>
            var selectOption = new Vue({
                el: '#selectOption',
                data:{
                    '商品一覧':[
                        {
                            '商品名':'商品名1',
                            '在庫':5,
                            '注文数':0
                        },
                        {
                            '商品名':'商品名2',
                            '在庫':4,
                            '注文数':0
                        },
                        {
                            '商品名':'商品名3',
                            '在庫':3,
                            '注文数':0
                        },
                    ],
                },
                methods:{
                    cartIn:function(){
                        cartApp.cart = []
                        this.商品一覧.forEach(element => {
                            if(element.注文数 > 0){
                                cartApp.cart.push({[element.商品名]:element.注文数})
                            }
                        })
                    }
                },
            })

            var cartApp = new Vue({
                el: '#cartApp',
                data:{
                    cart:[],
                },
            })
        </script>
    </body>
</html>

今回はちょっと時間が無いので解説は省きますがVue.jsを触っている人なら、ある程度わかると思います。
もっと良い方法があるかもですが、ん〜どうでしょうか。

なによりcartApp.cart = []でリセットしているところが気にくわないですね。
そこは変わったとこだけ変更するようにしたい…です。

気が向いたら第2弾で改善してみたいですね。

タグ:

あわせて読みたい