Question

我是Vue.js的新手，尝试创建一个单页博客，只是为了让我的眼睛湿透了vue / laravel组合，而且在删除一个＆＃34;故事＆＃时我被困住了＃ 34;来自＆＃34;故事＆＃34;我正在努力。我知道路线很好，因为故事实际上删除了，没有错误被抛出，但删除的故事将保留在数组中，直到我刷新页面。从我在其他地方读到的，我实现的代码应该立即更新数组。我已经附加了我的刀片视图，vue.js文件和控制器的相关部分。提前谢谢！

JS（VUE）

＆＃13;

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);
      });

    }

  }
});

＆＃13;

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>

（Vue.js和Laravel）删除项目

1 个答案: