Блог

Главная - Вопросы по программированию - Как переместить элемент массива в другой массив в Vue Js

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

#vue.js #web

#vue.js #веб

Вопрос:

Я новичок в 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>

Комментарии:

1. Почему вы использовали здесь 2 отдельных экземпляра vue? Это было бы гораздо лучше подходит в качестве отдельных компонентов внутри одного экземпляра vue. Вы можете создать эти компоненты?

Ответ №1:

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

  1. Вы не передали товар для добавления в корзину
  2. Вы добавили «{‘nama’:this.ram,’jumlah’: this.jumlah,’harga’: this.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>

Комментарии:

1. Я понял. Большое вам спасибо