Vue v-on:click does not work on component with axios

Hello, from my component I want to make several calls. With the get request, I am displaying the data bound to an array which contains several unique objects with their id. with v-for.
When clicking delete, the request doesn’t work. the button does not trigger.
On the backend side with postman sending the _id of the article in the body, the request runs fine. An article contains: {_id, title,description}.

<div
      v-for="(article, index) of articles"
      :key="article._id"
      class="custom"
        @remove="removeItem(article._id, index)"
    >
      <article >
            <h1>
              {{ article.title }}
            </h1>
            <p class="card-text">{{ article.description }}</p>
          </div>
            <button
              type="submit"
              @click="$emit('remove')"
            >
              Delete
            </button>
      </article>
</div>
      axios
        .delete("http://localhost:3000/api/articles", {
          headers: {
            Authorization: "Bearer, " + localStorage.getItem("token"),
          },
        })
        .then((response) => {
          this.$emit("remove", response);
          this.articles.splice(index, 1);
          console.log(response);
          alert("succes");
        })
        .catch((error) => {
          console.log(error);
        });
    },```

I think I must use method splice with index because articles it’s array.

Hi @Webystud
You need to take it out into components if you want it to work simply.
first, define an article component maybe
"ArticleComponent.vue" and write this

<template>
     <article >
          <div>

            <h1>
              {{ article.title }}
            </h1>
            <p class="card-text">{{ article.description }}</p>
          </div>
            <button
              type="submit"
              @click="$emit('remove',  article)"
            >
              Delete
            </button>
      </article>

</template>

<script>
export default {
  name: 'ArticleComponent',
  props:{
      article: Object,
  }
}
</script>

After that in the parent component maybe you can call it “ArticleList.vue” write this

<template>
 <!-- other codes -->
 <div
      v-for="(article, index) of articles"
      :key="article._id"
      class="custom"
    >
    <article-component :article='article' remove="remove"/>

 </div>
</template>
<script>
import ArticleComponent from 'your-component-folder/ArticleComponent'
export default {
    name: 'ArticleList',
    components: {
        ArticleComponent
    },
    data(){
        return{
        }
    },
    methods: {
        remove(article){
            // remove article in the backend, which means send request 
            // then refresh the list
        }
    }

}
</script>

This is an overview. If you want you should refer more to components.

1 Like

In fact no need to use events:

    <div
      v-for="(article, index) of articles"
      :key="article._id"
      class="custom"
    >
      <article>
        <h1>
          {{ article.title }}
        </h1>
        <p class="card-text">{{ article.description }}</p>

        <button type="submit" @click="removeItem(article._id, index)">Delete</button>
      </article>
    </div>

Also, you have an extra </div> in your code

1 Like

Thank you for your help.
I already solved my problem but I also keep your method. :slight_smile:

1 Like