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

但是当我对Update执行此操作时，它不起作用：

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()是我的loyerService.js文件中的一个函数。

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

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

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

Answer 1

根据您对代码的了解，

这应该可以从jobPost删除jobPosts

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存在于数组类型上，因此我将检查它的设置位置并确保它是一个数组。

为了帮助您，我提供了一个小片段。

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方法：

Chrome Version 81.0.4044.138

在使用普通集合时，values方法应该可以完成返回数组而不是对象的技巧：

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

更新

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

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

$values = $collection->values();

$values->all();

如何使用Vue js删除数据？

2 个答案: