(Vue.js and Laravel) 删除项目后数组不会刷新

Question

我是 Vue.js 的新手，试图创建一个单页博客只是为了熟悉 vue/laravel 组合，但在删除 "story" 来自我正在使用的 "stories" 数组。我知道路线没问题，因为 故事实际上删除了，没有抛出任何错误，但删除的故事将保留在数组中，直到我刷新页面。 从我在其他地方读到的内容来看，我已经实现的代码应该立即更新数组。我附上了我的 blade 视图、vue.js 文件和控制器的相关部分。提前致谢！

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>

控制器

public function delete($id)
{

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

Answer 1

$remove 方法现在将参数视为要搜索的项目而不是索引。换句话说，试试这个：

删除方法：

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 部分：

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

来源：https://github.com/vuejs/vue/releases

编辑：由于您要传递整个故事项目，实际上您可以只传递一个参数并将代码缩短为：

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>

(Vue.js and Laravel) 删除项目后数组不会刷新

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

vue.js

laravel-5