CODEWITHSUNDEEP
vue.jsweb
Philip Purwoko
Philip Purwoko

Reputation: 447

How to move item of array into another array in Vue Js

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>{{ item.nama }}</strong>
                </div>
                <div>
                    Jumlah : <input type="number" v-model:value="item.jumlah" min="1" max="100" value="1">
                </div>
                <div>
                    Harga : {{ item.jumlah * item.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>

Upvotes: 0

Views: 1013

Answers (1)

Nesar
Nesar

Reputation: 5664

You were going right, you made 2 mistakes,

  1. You did not pass the item to be added to the cart
  2. You added "{'nama':this.ram,'jumlah': this.jumlah,'harga' : this.harga}" but this means entire vue object. which doesn't contain those properties

I've modified your code, and it works. Check below

var items = new Vue({
  el:"#items",
  data:{
    daftar : [
      {'nama':'ram','jumlah': 1,'harga' : 12000},
      {'nama':'cpu','jumlah': 1,'harga' : 15000},
    ]
  },
  methods:{
    tambahkan:function(item){
      keranjang.daftar.push(item);
    }
  }
});

var keranjang = new Vue({
  el:"#keranjang",
  data:{
    daftar: []
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<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>{{ item.nama }}</strong>
                </div>
                <div>
                    Jumlah : <input type="number" v-model:value="item.jumlah" min="1" max="100" value="1">
                </div>
                <div>
                    Harga : {{ item.jumlah * item.harga }}
                </div>
                <div>
                    <button @click="tambahkan(item)">Tambah ke keranjang</button>
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div id="keranjang">
            <ul>
                <li  v-for="item in daftar">
                  <strong>{{ item.nama }}</strong>
                </li>
            </ul>
        </div>
    </div>

Upvotes: 1

Related Questions