js (vue)如何处理每一组多个按钮的情况？

Question

一些后台系统很容易出现如下图的情况： 每一行都有信息，每一行信息后面都有几个按钮，这些按钮其他的都一样，只是点击后，可能请求接口的参数不一样，比如name不同。那么点击按钮时候的需要的值从哪里取？

是在parent上放很多属性，还是在按钮上放很多属性？

单纯js有没有什么简单优雅的写法？
如果使用vue的话如何写？

Answer 1

只需要3个函数方法

<div v-for(item,index) in yourDataList>
    <span @click='shanChu(item,index)'>删除</span>
    <span @click='xiuGai(item,index)'>修改</span>
    <span>复制</span>
</div> 

data(){
    yourDataList:''
}
methods:{
    //请求回来的数据，假设你实用axios
        getData () {
        this.axios.get(url)
          .then(res => {
            this.yourDataList=res.data//假设拿到的数据放到了data中了
            }
          })
      },
      shanChu (item,index) {
          let id=item.id;假设有个id
          this.axios.get(‘删除的接口’,{params:{id:id}},
          .then(res => {
                
            }
          })
      },
      xiuGai(item,index) {
          let id=item.id;假设有个id
          let id=item.name;假设需要name
          this.axios.get(‘删除的接口’,{params:{id:id,name:name}},
          .then(res => {
                
            }
          })
      }
}

Answer 2

v-for循环出的列表，可以这样写

<li v-for="(item,index) in items">
        <span></span>
         ....
         <button v-on:click=dealFunc(index)></button>
</li>

这样的话，items是你在vue实例的data属性中定义过的数组，然后你还能拿到索引，于是就能在函数里面拿到一行数据所有的数组中的值来做处理了。