Addings Rows in Element In Vue Js - vue.js

Question

I'm trying to display rows using the Element IO in VueJs. My problem is why is my code not outputting and how can i add some rows and remove some rows? Is there something wrong with my code? I've attached a v-for but it seems it can't work. I'm sorry i'm new to element-ui. Please see my code below.Thank you.
<template>
<div>
<el-form>
<el-table v-for='(item, index) in items' :key='index'>
<el-table-column
sortable="true"
label="Item">
<template>
<el-input v-model="item.item_id"></el-input>
</template>
</el-table-column>
<el-table-column
sortable="true"
label="Quantity">
<template>
<el-input v-model="item.quantity"></el-input>
</template>
</el-table-column>
<el-table-column
sortable="true"
label="Unit">
<template>
<el-input v-model="item.quantity"></el-input>
</template>
</el-table-column>
<el-table-column
sortable="true"
label="Unit Price">
<template>
<el-input v-model="item.unit_price"></el-input>
</template>
</el-table-column>
<el-table-column
fixed="right"
property="action"
label="Action">
<template>
<el-button type="danger" size="small">Remove</el-button>
</template>
</el-table-column>
</el-table>
<br>
<el-form-item style="float:right;">
<el-button type="submit" #click.prevent="createNewPurchaseOrder">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
item_id: '1',
quantity: '8',
unit_id: 'Gram',
unit_price: '100'
}
]
}
},
methods: {
createNewPurchaseOrder () {
console.log(this.$data)
}
}
}
</script>

Answer 1

You don't need to iterate your self. el-table component from Element-Ui is taking a array as data props to work. See Table Props for el-table component in ElementUI
This should works :
<el-table :data="items">
...
</el-table>
Each el-table-column must be a key of your item in your item list by adding prop='myKey' to each el-table-column
For exemple if I got a array of items like this :
[{
id : 12,
firstname : "John",
lastname : "Doe"
}]
I will have a table like this
<el-table :data="items">
<el-table-column prop="id" label="ID">...</el-table-column>
<el-table-column prop="firstname" label="Firstname">...</el-table-column>
<el-table-column prop="lastname " label="Lastname">...</el-table-column>
</el-table>
When you will remove or add an item to your array, the :data props of the el-table will be reactive to changes.

Answer 2

Take more look at element table documentation
You have to pass a data property to el-table and a prop property to el-table-column
<template>
<div>
<el-form>
<el-table :data="items" :key='index'>
[...]
</el-table>
<br>
<el-form-item style="float:right;">
<el-button type="submit" #click.prevent="createNewPurchaseOrder">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
</div>