Удаление объекта из массива в Vue. js - throws Свойство метода не определено - PullRequest
Новая
       3

Удаление объекта из массива в Vue. js - throws Свойство метода не определено

2 голосов
/ 14 февраля 2020

У меня есть 3 файла: App, BlogList, BlogItem. Я хочу разрешить пользователю удалять post, если он / она хочет. Я использую соединение, но по какой-то причине я получаю эту ошибку:

Свойство или метод "removePost" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Вот фрагменты кода (BlogList включен в приложение и также состоит из множества BlogItems):

Приложение: 

<template>
  <div id="app">
    <Header />
    <PostList v-bind:posts="posts" />
  </div>
</template>

<script>
import axios from "axios";
import Header from ...
import PostList from ...

export default {
  name: "App",
  components: {
    Header,
    PostList,
  },
data() {
    return {
      posts: []
    };
  }
};
</script>

BlogList: 

<template>
<div class="blog-list">
    <div v-for="(post,index) in posts" v-bind:key="post.id">
      <PostItem v-bind:post="[post,index]" />
    </div>
</div>
</template>

<script>
import PostItem from ...

export default {
  name: "PostList",
  components: {
    PostItem
  },
  props: ["posts"],
  methods: {
    removePost: function(index) {
      this.$delete(this.posts, index);
    }
  }
};
</script>

BlogItem: 

<template>
  <div class="wrapper">
    <div class="post-text">{{post.data.title}}</div>
      <button class="btn-remove" @click="removePost(index)">Remove</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "PostItem",
  props: ["post"]
};
</script>

Я все еще довольно новичок в Vue, и передача данных между компонентами кажется сложной задачей. Я попытался объявить эту функцию в BlogList так, как там, где я поместил свой v-for, но я не могу получить индекс клика по сообщению в блоге (и я считаю, что именно это вызывает проблемы). Я включаю только необходимые фрагменты кода и знаю, что подобный вопрос уже задавался ( Как удалить элемент из массива в Vue. js), но в моем случае Я хочу использовать 3 отдельных компонента вместо одного.

1 Ответ

1 голос
/ 14 февраля 2020

Вы определили removePost в BlogList, но не в компоненте BlogItem, поэтому он выдает ошибку. Кроме того, в области действия BlogItem отсутствует индекс. В вашем сценарии было бы лучше либо создать событие, либо использовать <slot>. 

<template>
  <div class="wrapper">
    <div class="post-text">{{this.post.data.title}}</div>
      <button class="btn-remove" @click="removePost(this.index)">Remove</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "PostItem",
  props: ["post", "index"],
  methods: {
    removePost(index){
     this.$emit('remove-post', index);

    }

  }
};
</script>

А затем в компоненте PostList перехватите событие в created() и вызовите родительский элемент removePost: 

<template>
<div class="blog-list">
    <div v-for="(post,index) in posts" v-bind:key="post.id">
      <PostItem v-bind:post="[post,index]" />
    </div>
</div>
</template>

<script>
import PostItem from ...

export default {
  name: "PostList",
  components: {
    PostItem
  },
  props: ["posts"],
  created(){
    this.$root.$on('remove-post', function(index){
      this.removePost(index);
    });
  },
  methods: {
    removePost: function(index) {
      this.$delete(this.posts, index);
    }
  }
};
</script>
...