Vue.js 如何在Vue Js中将数组项移动到另一个数组中_Vue.js_Web

Vue.js 如何在Vue Js中将数组项移动到另一个数组中

vue.js web

Vue.js 如何在Vue Js中将数组项移动到另一个数组中,vue.js,web,Vue.js,Web,我是Vue.js的新手，我只想制作一个简单的网上商店模型。我想，如果点击按钮，通过激活tambahkan方法将产品从items-daftar数组中删除，然后推入keranjang-daftar数组。这是我的全部代码，非常感谢您的回复。多谢各位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name

我是Vue.js的新手，我只想制作一个简单的网上商店模型。我想，如果点击按钮，通过激活

tambahkan

方法将产品从

items-daftar

数组中删除，然后推入

keranjang-daftar

数组。这是我的全部代码，非常感谢您的回复。多谢各位

<!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>


Vue.js |练习
电脑商店
{{item.nama}}
朱姆拉：
哈尔加：{{item.jumlah*item.Harga}
坦巴克兰江酒店



变量项=新的Vue({
el:“项目”，
数据：{
达夫塔：[
{'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}
]
},
方法：{
tambahkan:function（）{
keranjang.list.push（{'nama'：this.ram，'jumlah'：this.jumlah，'harga'：this.harga}）
}
}
});
var keranjang=新Vue({
el:"科兰江"，
数据：{
达夫塔：[]
}
});

你做对了，犯了两个错误

您没有传递要添加到购物车的项目

您添加了“{nama'：this.ram，'jumlah'：this.jumlah，'harga'：this.harga}”，但这意味着整个vue对象。其中不包含这些属性

我已经修改了你的代码，它是有效的。检查下面

var items=新的Vue({
el:“项目”，
数据：{
达夫塔：[
{'nama'：'ram'，'jumlah'：1，'harga'：12000}，
{'nama'：'cpu'，'jumlah'：1，'harga'：15000}，
]
},
方法：{
tambahkan：功能（项目）{
可兰江.大发.推（项）；
}
}
});
var keranjang=新Vue({
el:"科兰江"，
数据：{
达夫塔：[]
}
});

电脑商店
{{item.nama}}
朱姆拉：
哈尔加：{{item.jumlah*item.Harga}
坦巴克兰江酒店


{{item.nama}}


为什么在这里使用两个单独的vue实例？这更适合作为单个vue实例中的独立组件。你能制造这些部件吗？我懂了。非常感谢你