I am new in Vue.js, I just want to make simple online web store model. I want if the button is clicked, the product is removed from items daftar array by activating tambahkan method then pushed into keranjang daftar array. Here is my full code, I really appreciate for all your responses. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js | Excercises</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- HTML element -->
<h2>Computer Store</h2>
<div style="display: grid;grid-template-columns: auto auto;">
<!-- Left Column -->
<div id="items" style="width: 200px;margin: auto;">
<div v-for="item in daftar" style="margin: 10px;border: 1px solid gray;padding: 10px;mar">
<div>
<strong></strong>
</div>
<div>
Jumlah : <input type="number" v-model:value="item.jumlah" min="1" max="100" value="1">
</div>
<div>
Harga :
</div>
<div>
<button @click="tambahkan">Tambah ke keranjang</button>
</div>
</div>
</div>
<!-- Right Column -->
<div id="keranjang">
<ul>
<li></li>
</ul>
</div>
</div>
<!-- Vue Js Script -->
<script>
var items = new Vue({
el:"#items",
data:{
daftar : [
{'nama':'ram','jumlah': 1,'harga' : 12000},
{'nama':'cpu','jumlah': 1,'harga' : 15000},
{'nama':'hdd','jumlah': 1,'harga' : 22000},
{'nama':'monitor','jumlah': 1,'harga' : 2000},
{'nama':'mouse','jumlah': 1,'harga' : 65000},
{'nama':'ram2','jumlah': 1,'harga' : 12000},
{'nama':'cpu2','jumlah': 1,'harga' : 15000},
{'nama':'hdd2','jumlah': 1,'harga' : 22000},
{'nama':'monitor2','jumlah': 1,'harga' : 2000},
{'nama':'mouse2','jumlah': 1,'harga' : 65000}
]
},
methods:{
tambahkan:function(){
keranjang.list.push({'nama':this.ram,'jumlah': this.jumlah,'harga' : this.harga})
}
}
});
var keranjang = new Vue({
el:"#keranjang",
data:{
daftar: []
}
});
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire