（Vue.js和Laravel）删除项目后，阵列不会刷新

Question

我是Vue.js的新手，尝试创建单个页面博客，只是为了让我的双脚与vue/laravel组合在一起，而我当涉及从我正在处理的“故事”数组中删除一个“故事”时，它陷入了僵局。我知道路线没问题，因为故事实际上被删除，没有错误被抛出，但被删除的故事将保留在数组中，直到我刷新页面。从我读过的其他地方，我已经实现的代码应该立即更新数组。我附加了我的刀片视图，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> 

CONTROLLER

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>