CODEWITHSUNDEEP
typescriptvue.jsvuejs2vue-componentnuxt.js
drunkdolphin
drunkdolphin

Reputation: 797

Vue.js - How to delete selected row by delete button in tbody?

I really understand vue.js, but my code didn't work well. Now I have tried to delete selected row information by using delete button exist same row. Even if I push the button in first row, never delete but I could delete from second row information.

I was using split method in my code. I checked vue.js web site and I was using $delete method but it didn't work.

I really want to understand vue.js and Typescript. Does any advise me? My code is below.

    <template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>username</th>
                    <th>delete</th>                    
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user,index) in users" :key="user.id">
                    <td>{{user.id}}</td>
                    <td>{{user.email}}</td>
                    <td><v-btn class="btn btn-danger" @click="deleteRow(index)">delete</v-btn></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'
import axios from 'axios'

@Component({})
export default class extends Vue{
    users:any=[]
    deleteRow(index:any){
        this.users.splice(this.users,index)
    };
    async mounted(){
        const response = await axios.get("https://jsonplaceholder.typicode.com/users");
        this.users = response.data;
    }   
}
</script>

Upvotes: 0

Views: 1195

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You're misusing splice with the parameters start as index and the second parameter for the deletes count:

 this.users.splice(index,1)

Upvotes: 1

Gaetan C.
Gaetan C.

Reputation: 1904

I think you are not using splice properly. Your method should be:

deleteRow(index:any) {
  this.users.splice(index, 1);
}

Upvotes: 3

Related Questions