(Vue.js and Laravel) Array won't refresh after deleting item

Question

I'm new to Vue.js, trying to create a single page blog just to get my feet wet with the vue/laravel combo, and I am stuck when it comes to deleting a "story" from the array of "stories" I am working with. I know the routes are fine because the story actually deletes, no errors are thrown, but the deleted story will remain in the array until I refresh the page. From what I've read elsewhere, the code I have implemented should update the array immediately. I have attached the relevant parts of my blade view, vue.js file, and controller. Thanks in advance!

JS (VUE)

new Vue({
  el: '[vue-news]',

  search: "",

  data: {
    stories: ''
  },

  ready: function() {

    // GET request
    this.$http.get('/app/news/get', function(data, status, request) {

      // set data on vm
      this.$set('stories', data);
      // console.log(data);

    }).error(function(data, status, request) {
      // handle error
    });

  },

  methods: {
  
    // DELETE STORY FROM ARRAY
    deleteNews: function(id, index) {


      this.$http.delete('app/news/' + id + '/delete').success(function(response) {
        this.stories.$remove(index);
        swal("Deleted!", "Your news story has been deleted.", "success");


      }).error(function(error) {
        console.log(error);
        swal(error);
      });

    }

  }
});

BLADE

<section vue-news>
  <div class="row news-row">
    <div class="columns large-9 medium-9 small-12">
      <article data-id="@{{ story.id }}" class="story panel" v-for="story in stories | filterBy search" track-by="$index">
        <h1>@{{ story.title }}</h1>
        <p>@{{ story.content }}</p>
        <p>@{{ story.created_at }}</p>
        <p>@{{ story.id }}</p>
        <p>@{{ story.timestamp }}</p>
        <a href="#" class="read-more">Read More...</a>

        <div class="options">

          <a @click="editNews" href="#">
            <i class=" edit fa fa-pencil-square-o"></i>
          </a>

          {{-- DELETE NEWS BUTTON --}}
          <a @click.prevent="deleteNews(story.id, $index)" href="#">
            <i class="delete fa fa-trash-o"></i>
          </a>

        </div>
      </article>
    </div>
    <div class="columns large-3 medium-3 small-12">
      <input type="text" v-model="search">
    </div>
  </div>
</section>

CONTROLLER

public function delete($id)
{

     return response()->json(News::destroy($id));
}

Answer 1

The $remove method now treats the argument as an item to search for rather than an index. In other words, try this out:

Delete method:

deleteNews: function(id, story) {

    this.$http.delete('app/news/' + id + '/delete').success(function(response) {
        this.stories.$remove(story);
        swal("Deleted!", "Your news story has been deleted.", "success");
    }).error(function(error) {
        console.log(error);
        swal(error);
    });

}

HTML section:

<a @click.prevent="deleteNews(story.id, story)" href="#">
    <i class="delete fa fa-trash-o"></i>
</a>

Source: https://github.com/vuejs/vue/releases

Edit: Since you are passing the entire story item, you can actually just pass one argument and shorten the code to this:

Vue:

deleteNews: function(story) {

    this.$http.delete('app/news/' + story.id + '/delete').success(function(response) {
        this.stories.$remove(story);
        swal("Deleted!", "Your news story has been deleted.", "success");
    }).error(function(error) {
        console.log(error);
        swal(error);
    });

}

HTML:

<a @click.prevent="deleteNews(story)" href="#">
    <i class="delete fa fa-trash-o"></i>
</a>