Как переместить элемент массива в другой массив в Vue Js


Как переместить элемент массива в другой массив в Vue Js

04.10.2020 07:30:54 Просмотров 5 Источник

Я новичок в этом деле Vue.js, я просто хочу сделать простую модель интернет-магазина. Я хочу, чтобы при нажатии на кнопку продукт удалялся из массива items daftar путем активации метода tambahkan, а затем помещался в массив 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 / How to move item of array into another array in Vue Js

Является ответом!
Nesar

04.10.2020 07:47:04

Вы шли правильно, вы сделали 2 ошибки,

  1. Вы не передали товар для добавления в корзину
  2. Вы добавили "{'Нама':это.ОЗУ,'Джумла': это.Джумла,'анализатор' : это.harga} " но это означает весь объект vue. который не содержит этих свойств

Я изменил ваш код, и он работает. Проверьте ниже

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/vue@2.6.12"></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>

Помочь в развитии проекта:
Закрыть X