今天写了第一个vue组件，有两个table实现的是点击按钮，此行内容出现在另外的table中，点击另外的table中的按钮，内容出现在另一个table中。
出现的问题：1.一个组件的template只有一个根元素。
错误截图：
正确截图：应该包含在一个div下。
2.v-for里，使用的：key不能用数组对象里面自定义的数据。
比如：：key=‘itme.num’ 这样会引入bug。可以使用v-for='(item,index) in top' :key='index' 但是跟推荐自定义的key
代码部分：
```bash
<template>
<div id="di">
<div id="div1">
<table >
<tr v-for="(item,index) intop " :key="index">
<td>{{item.num }}</td>
<td>{{item.question }}</td>
<td><button @click="addRight(item,index)">添加</button></td>
</tr>
</table>
</div>
<div id="div2">
<table >
<tr v-for="(it,index) inbot" :key="index">
<td>{{it.num }}</td>
<td>{{it.question }}</td>
<td><button @click="addLeft(it,index)">取消</button></td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
data () {
return {
top: [ {
question: 'aaaa1',
num: '0'
},
{
question: 'bb2',
num: '1'
},
{
question: 'cc3',
num: '2'
}
],
show: true,
bot: [],
}
},
methods: {
'addRight': function (e,index)
{
this.bot.push({ 'num': e.num,'question': e.question })
//this.bot.splice(index , 0 , { 'num': e.num,'question': e.question })
this.top.splice(index, 1)
console.log('e'+index)
},
'addLeft': function (p,index)
{
//this.top.push({ 'num': p.num,'question': p.question })
this.top.splice(index, 0 , { 'num': p.num,'question': p.question })
this.bot.splice(index, 1)
console.log(this.bot)
}
}
}
</script>
```
结果截图：
