[Vuejs]-Index not defined while deleting element from array

by

0👍

You can find index of element in array with findIndex method:

remove(item) {   
         const index = this.items.findIndex(arrayItem => arrayItem === item);   
         this.items.splice(index, 1);
       }

0👍

An Instance of finding the specific index and remove it from the array.

In below snippet, find the index which has { id: 2 } and removes it from an array.

const array = [{ id: 1 }, { id: 2 }, 
{ id: 3 }];
const index = array.findIndex((f) => 
{ return f.id && f.id === 2; });
console.log(index);
if(index > -1) {
// remove entry from found index
array.splice(index, 1);
   console.log(array);
   }

0👍

The issue comes when you are trying to call a function when a reference is needed. Instead of v-on:after-enter="remove(index)", try this v-on:after-enter="remove". So, when the v-on:after-enter is triggered its going to call the remove(item) using the reference you’ve already given to it. If you are giving a reference to a function you only use the name of that function.

0👍

I modified the code to make it more obvious what I want to do

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
    <title>life is vuetiful</title>
</head>
<body class="has-background-primary">
<style>
html {
	background-color: transparent;
}

body {
	width: 42%;
	margin: 2em auto;
}

a[disabled] {
	color: grey;
	cursor: default;
	background-color: lightgray;
}

.hard {
	border: 10px solid purple;
}

.sixnine {
	background-color: pink;
	border: 20px solid hotpink;
	outline: 15px solid pink;
}

.image {
    position: absolute;
    top: calc(0vh - 500px);
    left: 0;
    right: 0;
    /* pointer-events: none; */
    /* top: 50%;
    left: 50%;
    transform: translate(-50%); */
}

.drop-enter-active {
    transition: transform 3s;
}

.drop-enter {
    transform: translateY(0vh);
}

.drop-enter-to {
    transform: translateY(calc(100vh + 500px));
}
</style>
    
    <div id="app">
        <test></test>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    Vue.component('test', {
    template: 
        `
        <div class="card">
            <footer class="card-footer">
                <a class="card-footer-item" @click="drop">run</a>
            </footer>

            <transition-group name="drop" v-on:after-enter="remove(index)">
                <img src="https://picsum.photos/id/237/200/300" class="image" v-for="               (item, index) in items" :key="index" alt="an image">
            </transition-group>
        </div>
        `
    ,
    data() {
        return {
            items: []
        }
    },
    methods: {
        drop() {
            this.items.push(this.item);
        },
        remove (index) {
            this.$delete(this.items, index);
        }
    }
})
    </script>
    <script>
        const vue = new Vue({
            el: '#app'
        })
    </script>

</body>
</html>

Leave a comment