5

I keep getting the same error that this.list.$remove is not a function. I believe it has something to do with the html markup but not sure. Can anyone point me in the right direction? I have been struggling for the last 2 days.

 Vue.component('cart-co', {

  template: '#cart-template',

  data: function() {
    return {
      list: []
    }
  },

  ready: function() {
    $.getJSON('cart/content', function(data) {
      this.list = data;
    }.bind(this));
  },

  methods: {
    removeItem: function(item) {
      console.log(item);
      this.list.$remove(item);
    }
  }
});


new Vue({
  el: 'body',
});

Here is my cart section:

<cart-co></cart-co>

<template id="cart-template">
  <div class="cart-content-wrapper">
    <div class="cart-content" >
      <ul v-if="list" class="scroller" style="height: 250px;">

        <li v-for="item in list">
          <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="" width="37" height="34"></a>
          <span class="cart-content-count">@{{ item.quantity }}</span>
          <strong><a href="item.html">@{{ item.name }}</a></strong>
          <em>@{{ item.price | currency }}</em>
          <a href="#" class="del-goods" v-on:click="removeItem(item)"><i class="fa fa-times"></i></a>
        </li>

      </ul>
      <ul v-else class="scroller" style="height: 250px;">
        <li>Shopping cart is empty</li>
      </ul>
      <div class="text-right">
        <a href="{{ route('cart.show-cart') }}" class="btn btn-default">View Cart</a>
        <a href="checkout.html" class="btn btn-primary">Checkout</a>
      </div>
    </div>
  </div>
</template>
4
  • I believe this issue is somewhere else in your code. I took your code and adjusted it very slightly to see if I got the same error but it worked fine: jsfiddle.net/crswll/g1a1q3k3 Commented Feb 17, 2016 at 2:04
  • I looked up Vue Devtools and noticed that the data I get are objects within an object instead of objects within an array. So I replaced the object with dummy data as an array and it still gives me the same error. So that's not it. I'm wondering if Vue has conflicts with other javascript libraries?
    – Robbie
    Commented Feb 17, 2016 at 14:24
  • Hmm. I believe the problem is with the object after all. When the list is an array the .$remove works. When the list is an object the .$remove gives error this is not a function. I have looked up the docs but there is no reference to this method with objects. There is a reference to Object v-for vuejs.org/guide/list.html#Object_v-for . Any help to point me in the right direction will be appreciated.
    – Robbie
    Commented Feb 17, 2016 at 16:12
  • I think it would be helpful to see a sample of the data coming back from your $.getJSON() call.
    – Peter
    Commented Feb 17, 2016 at 16:46

2 Answers 2

4

$remove is not available in vue js 2.0... now you can use

splice(index,1) " 1 means it splice one element from the array "

3

If the data coming back from your $.getJSON() call is an object (with each item in the cart being a key value pair), you can modify your code as follows to handle removing items.

Assumming data looks something like this:

{
   "item1": { "name": "Name 1", "quantity": 1, "price": 10 },
   "item2": { "name": "Name 2", "quantity": 1, "price": 10 },
   "item3": { "name": "Name 3", "quantity": 1, "price": 10 }
};

Pass the key of the item you want to remove in your delete link:

<a href="#" class="del-goods" v-on:click="removeItem($key)"><i class="fa fa-times"></i></a>

Change your removeItem() method to something like this:

removeItem: function(key) {
  Vue.delete(this.list, key);
}

This uses the Vue.delete method to delete the property (and ensures the view reacts to the change).

2
  • Thanks Peter, that was it. It's now removing the item from the cart.
    – Robbie
    Commented Feb 17, 2016 at 19:23
  • 1
    For anyone else who is having this issue in Vue2, you must about array change detection and the mutation methods: vuejs.org/v2/guide/list.html#Array-Change-Detection and call removeItem(key) which uses this.list.splice(key, 1);. Commented Nov 14, 2016 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.