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弾で改善してみたいですね。
