Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Row Component</title>
</head>
<body>
    <div id="app">
            
            <my-item v-for="(row, index) in rows"
                    :itemdata="itemList"
                    v-on:remove="removeRow(index)"></my-item>
            
        <div>
            <button @click="addRow"> Add Row </button>
        </div>
    </div>
<template id="item-template">
    <div>
        <select v-model="selected">
            <option v-for="item in itemdata"  :value="item"> {{ item.code }} </option>
        </select>
        <input type="text" placeholder="Text" v-model="selected.description">
        <input type="text" placeholder="value" v-model="selected.unitprice">
        <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: ['itemdata'],
    template: '#item-template',
    data: function () {
        return {
        selected: this.itemdata[0]
        }
    },
    methods: {
        
        remove() {
            // when the delete button on the template is clicked this method triggers
            // an event called "remove", the parent instance listens for that event
            // by using "v-on:remove" and in turn triggers it's on method called removeRow(index).
            this.$emit('remove');
        }
        
         
    }
}),
new Vue({
    el: "#app",
    // user data is stored only in the parent so the component remains de-coupled
    // and therefore able to use different data properties on different instances 
    data: {
        rows: 1,
        itemList: [
            { code: 'Select an Item', description: '', unitprice: ''},
            { code: 'One', description: 'Item A', unitprice: '10'},
            { code: 'Two', description: 'Item B', unitprice: '22'},
            { code: 'Three', description: 'Item C', unitprice: '56'}
        ]
    },
    methods: {
        addRow(){
            this.rows++;
        },
        removeRow(index){
            this.rows.splice(index, 1)
        }
    }
})
       
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Pyolpro
0viewers