Web Tutorials

BIGGEST AND FASTEST Web Tutorials – live24u.com

img
Home / JavaScript / Ajax / Vuejs push object Insert Remove Splice and Replace elements with Array

Vuejs push object Insert Remove Splice and Replace elements with Array

/
/
/
13 Views

Vuejs push object Insert Remove Splice and Replace elements with Array

In this Post We Will Explain About is Vuejs push object Insert Remove Splice and Replace elements with Array With Example and Demo.

Welcome on live24u.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs Push values object into array First Index

In this post we will show you Best way to implement How to insert an item into an array at a specific index using vuejs, hear for How to Vuejs push item to first or 0 index of array with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

You can download source code and Demo from below link.




Syntex for add and remove item from array

Step 1 : we need to simple add proper object vuejs in the array in simple addRow method
Step 2 : we can use simple splice method to data remove an HTML element from an array using vuejs at particular index.
Step 3 : we need to simple param pass the current row using vuejs as prop to my-item simple component, so you can where this can be changed.

createRow(){
   this.rows.push({productDesc: '', skuprice: '' , itemcode: ''}); // what to simple vuejs  push unto the rows array?
},
deleterow(index){
   this. productList.splice(index, 1)
}

How to add and remove item from array in components in Vue 2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>vuejs Push values object into array First Index - Row Component</title>
</head>

<body>
<h2>vuejs Push values object into array First Index</h2>
    <div id="app">
            <my-item v-for="(row, index) in rows"
                    :dataitems="productList"
                    :row="row"                     
                    v-on:remove="deleterow(index)">
            </my-item>
            {{rows}}
        <div>
            <button @click="createRow"> Add sdfds Row </button>
        </div>
    </div>

<template id="item-template">
    <div>
        <select v-model="row.itemcode">
            <option v-for="item in dataitems"  :value="item"> {{ item.itemcode }} </option>
        </select>
        <input type="text" placeholder="Enter your Text" v-model="row.productDesc">
        <input type="text" placeholder="Enter your value" v-model="row.skuprice">
        <button v-on:click= "remove"> X </button>
    </div>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script>

Vue.component('my-item', {
    props: ['dataitems', 'row'],
    template: '#item-template',
    data: function () {
        return {
        selected: this.dataitems[0]
        }
    },
    methods: {
        remove() {
            this.$emit('remove');
        }
    }
}),

new Vue({
    el: "#app",
    data: {
        rows: [],
    	productList: [
            { itemcode: 'Select an Item', productDesc: '', skuprice: ''},
			{ itemcode: 'One', productDesc: 'Item A', skuprice: '10'},
			{ itemcode: 'Two', productDesc: 'Item B', skuprice: '22'},
			{ itemcode: 'Three', productDesc: 'Item C', skuprice: '56'}
        ]
    },

    methods: {
        createRow(){
           this.rows.push({productDesc: '', skuprice: '' , itemcode: ''}); 
        },
        deleterow(index){
           this.rows.splice(index,1); 
        }
    }
})
</script>
</body>
</html>

You can download source code and Demo from below link.




Example

I hope you have Got How to add and remove item from array in components in Vue 2 And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Vestibulum nec placerat orci. Mauris vehicula

Vestibulum nec placerat orci. Mauris vehicula,Vestibulum nec placerat orci. Mauris vehicula

It is main inner container footer text