Vue.jsで複数のselectで選択されている値を取る
言葉では難しいのですが商品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弾で改善してみたいですね。