投稿

如何使用Vue js删除数据？

实战宝典 • • 实战宝典 • 阅读 1

我正在尝试删除数据，但我得到这个错误。

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

UPDATED

这是加载工作岗位的代码。

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来进行状态管理 我使用的是services，简单地包含axios的http请求。这就是这一行的由来 employerService.loadJobPosts() loadJobPosts() 是我的 employerService.js 文件中的一个函数.

我也使用Laravel作为我的后端. 这是我的JobPostsController.php文件:

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

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

解决方案：

根据我从你的代码中了解到的情况。

这对去除 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>

本文来自投稿，不代表实战宝典立场，如若转载，请注明出处：https://www.shizhanbaodian.com/40666.html

赞 (0)
实战宝典实战宝典
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 14小时前
下一篇 14小时前

相关推荐

发表评论

登录后才能评论