vue里实现列表内部单个增加数据？

Question

现在想做的效果就是
点击后面的“+”按钮单独增加这一行的数字。

数据是假装从后台拿回来的没有数量字段的json格式的数据。

 <!-- 加减 -->
<div id="numChange">
    <ul>
        <li v-for="(item,index) in testList">
            <span v-text="item.name" style="margin-right: 30px"></span><span>{{counter}}</span><button @click="plus">+</button>
        </li>
    </ul>
</div>

<script type="text/javascript">
var vm=new Vue({
    el:"#numChange",
    data:{
        testList:[
            {name:"item1",id:"0"},
            {name:"item2",id:"1"},
            {name:"item3",id:"2"}
        ],
        counter:0
    },
    methods:{
        plus:function(){
            this.counter++;
        }
    }
})
</script>

自己写的这里，不想给testList数据加别的字段，假设数据很多此时把counter写成【0，0，0】这样的也不太合适所以…求大神指点一下

Answer 1

虽然用组件的形式实现了，但是大概不是我想要的那种效果