Как удалить данные с помощью 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);
                }
            },

У меня была такая же проблема с моим обновлением метод, и я верю, что это произошло потому, что я пытался отобразить объект или что-то в этом роде вместо массива. В конце концов, я использовал 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 для управления состоянием, и я использую службы, которые просто содержат http-запросы ax ios. Вот откуда эта строка. employerService.loadJobPosts() loadJobPosts() - это функция внутри моей службы работодателя. js файл.

Я также использую Laravel для своей серверной части. Вот мой JobPostsController. php файл:

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

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

Answer 1

Вы уже ответили на свой вопрос:

в моем объекте data () у меня есть jobPosts: [], но в консоли написано Object

Что касается вашего второго вопроса:

Я не знаю, как вернуть данные в виде массива

Здесь есть похожие темы на SO . Я не знаком с Laravel, но предполагая, что у вас есть красноречивая модель с JobPost в вашей индексной функции в соответствии с docs , вы должны использовать .toArray-method:

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

При работе с простыми коллекциями метод значений должен выполнять трюк, возвращая массив вместо объекта:

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

$values = $collection->values();

$values->all();

UPDATE

Я только что понял, что ваш результат просто строковый объект JSON, который необходимо преобразовать в массив. Просто проанализируйте его перед обработкой (выньте JSON .parse (...), если вы уже заботитесь о нем в своей службе), верните свойства объекта в виде массива, и вы готовы к go:)

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

Answer 2

Из того, что я понял из вашего кода,

это должно работать для удаления 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>