Question

76

Vue.js Uncaught TypeError: this.list.$remove is not a function

rated 0 times [ 78] [ 2] / answers: 1 / hits: 16690 / 8 Years ago, tue, february 16, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

armandoh

Add To Favorites

Follow

Total Points: 208

Total Questions: 94

Total Answers: 112

Location: South Sudan

Member since Sun, Jul 11, 2021

3 Years ago

armandoh questions

1 Rendering Multiple Instances of the Same Component - React

Wed, Apr 13, 22, 00:00, 2 Years ago

1 Why React Function Component's this is undefined

Sat, Jan 30, 21, 00:00, 3 Years ago

1 Redux-Toolkit createAsyncThunk Dispatch is showing as undefined

Tue, Jul 7, 20, 00:00, 4 Years ago

1 Using Async/Await vs Promise.all with for-loops

Fri, Jun 5, 20, 00:00, 4 Years ago

1 How to set a dynamic env var in node.js

Sun, Dec 22, 19, 00:00, 5 Years ago

View All

answered 8 Years ago everett · Accepted Answer

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).