（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>