如何使用 Vue js 删除数据？

Question

我正在尝试删除数据，但出现此错误：

this.jobPosts.filter is not a function

PostJobIndex.vue 文件：

deleteJobPost: async function(jobPost) {
                if (!window.confirm('Are you sure you want to delete this Job Post?')) {
                    return;
                }

                try {
                    await employerService.deleteJobPost(jobPost.id);

                    this.jobPosts = this.jobPosts.filter(obj => {
                        return obj.id != jobPost.id;
                    });

                    console.log(this.jobPosts);

                    this.$toast.success("Job Post deleted Successfully!");
                } catch (error) {
                    console.log(error);
                    this.$toast.error(error.response.data.message);
                }
            },

我的 Update 方法遇到了同样的问题，我相信这是因为我试图通过对象或其他东西而不是数组进行映射。最后，我使用Object.keys(this.jobPosts).map 作为我的更新方法并且它起作用了：

Object.keys(this.jobPosts).map(jobPost => {
                        if (jobPost.id == response.data.id) {
                            for (let key in response.data) {
                                jobPost[key] = response.data[key];
                            }
                        }
                    });

但是当我为更新执行此操作时，它不起作用：

this.jobPosts = Object.keys(this.jobPosts).filter(obj => {
                        return obj.id != jobPost.id;
                    });

更新

这是加载招聘信息的代码：

loadJobPosts: async function() {
                try {
                    const response = await employerService.loadJobPosts();
                    this.jobPosts = response.data;

                    console.log(this.jobPosts);

                } catch (error) {
                    this.$toast.error('Some error occurred, please refresh!');
                }
            },

我正在使用 Vuex 进行状态管理，并且我正在使用仅包含 axios http 请求的服务。这就是这条线来自employerService.loadJobPosts() loadJobPosts() 是我的employeesService.js 文件中的一个函数。

我的后端也使用 Laravel。这是我的 JobPostsController.php 文件：

public function index()
    {
        $jobPosts = JobPost::all()->where('user_id', Auth::user()->id);

        return response()->json($jobPosts, 200);
    }

Answer 1

根据我从您的代码中了解到的情况，

这应该适用于从jobPosts 中删除jobPost

this.jobPosts = this.jobPosts.filter(obj => {
    return obj.id != jobPost.id;
});

我不知道你希望它做什么，但它不会做任何有用的事情，并且会出错或返回 false。

this.jobPosts = Object.keys(this.jobPosts).filter(obj => {
    return obj.id != jobPost.id;
});

filter 存在于数组类型中，所以我会检查它的设置位置并确保它是一个数组。

我已经包含了一个小的 sn-p，以防万一。

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  data: () => {
    return {
      jobPosts: [],
      deleteJobId: 1
    };
  },
  methods: {
    getJobPosts() {
      this.jobPosts = [{
        id: 1
      }, {
        id: 2
      }, {
        id: 3
      }, {
        id: 4
      }, {
        id: 5
      }];

    },
    deleteJob() {
      if (!this.deleteJobId)
        return;

      this.jobPosts = this.jobPosts.filter(x => x.id !== this.deleteJobId);
    }

  }



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="getJobPosts">Get Jobs</button>

  <div>
    <button type="button" @click="deleteJob">Delete Job #</button>
    <input type="number" v-model.number="deleteJobId" />

  </div>
  <ul>
    <li v-for="jobPost in jobPosts">
      Job Post #{{jobPost.id}}
    </li>
  </ul>
</div>

Answer 2

您已经回答了自己的问题：

在我的 data() 对象中，我有这个 jobPosts: []，但在控制台中显示的是 Object

关于你的第二个问题：

我不知道如何将数据作为数组返回

有similiar topics here on SO。 我对 Laravel 不熟悉，但假设您根据docs 在索引函数中有一个带有 JobPost 的雄辩模型，您应该使用 .toArray 方法：

$jobPosts = JobPost::all()->where('user_id', Auth::user()->id).toArray();

当使用普通集合时，values 方法应该能够返回数组而不是对象：

$collection = collect([
  10 => ['product' => 'Desk', 'price' => 200],
  11 => ['product' => 'Desk', 'price' => 200]
]);

$values = $collection->values();

$values->all();

更新

我刚刚意识到您的结果只是一个需要转换为数组的字符串化 JSON 对象。只需在处理之前解析它（取出 JSON.parse(...) 如果您已经在您的服务中处理它），将对象属性作为数组返回，您就可以开始了:)

this.jobPosts = Object.values(JSON.parse(this.jobPosts)).filter(obj => {
  return obj.id != jobPost.id;
});