vue 多个加减计算

cuts:function(idx){
    console.log(idx)
    // if(

this.$refs.idx[idx].textContent<1

) return

this.$refs.idx[idx].textContent--

},
add:function(e,idx){
  console.log(this.$refs.idx[idx].textContent)
 this.$refs.idx[idx].textContent++
}

liList:[{
    id:0,
},{
    id:1,
},{
    id:2,
}]

num:0,

<li v-for="(key,index) in liList" :key="key.id">
    {{key.id}}
    <template>
        <button class="cut" @click="cuts(idx)">-</button>
            <span ref="idx" :id="index" v-model="num">{{num}}</span>
            <button class="add" @click="add($event,index)">+</button>
    </template>
</li>
循环列表,数量声明只有一个.没有做循环,根据index索引值来做点击加减对应的index下的num改变.