[Vuejs]-Vue.js – v-for indicies mixed up?

by

2👍

✅

You don’t need a delete counter for achieving this. On the contrary, it makes it hard to understand your code. Just use a boolean like this:

<template>
    <div>
        <button @click="clickButton"
            <template v-if="confirmation">
                <i class="trash icon"></i>
            </template>
            <template v-else>
                Are you sure?
            </template>
        </button>
        <button v-if="confirmation" @click="confirmation = false">
            <i class="undo icon"></i>
        </button>
    </div>
</template>

<script>
  export default {
    name: 'DeleteWithConfirmation',
    data() {
      return {
        confirmation: false
      }
    },
    methods: {
      clickButton() {
        if (!this.confirmation) {
            this.confirmation = true;
        } else {
            this.$emit('deleting-confirmed');
        }
    }
}
</script>

The parent could then be looking e.g. like this:

<div class="row" v-if="showButton">
    [...]
    <delete-with-confirmation @deleting-confirmed="showButton = false">
</div>
👤ssc-hrep3

2👍

One of the answers was deleted, I wish I could mention the initial author, but I don’t remeber his username, so (changed a bit):

  incrementDelete() {
    if (this.deleteCounter === 1) { // 1 because there is "post-increment" at the end of the fucntion
      this.deletingProgress = true
      this.$emit('deletingConfirmed')
      this.stopDeleting()
    }
    else if (this.deleteCounter > 1) // 1 because there is "post-increment" at the end of the fucntion
      this.stopDeleting()
    this.deleteCounter++ // "post-increment"
  },

ssc-hrep3 answer is more clean (and lightweight) than mine approach, link.

👤Tarasovych

Leave a comment