Vue 把获取到的可编辑表格的值传给后端

前端代码：

<tr v-for="(item,val,idx) in itm.reserved_list" v-bind:key="idx">
    <td>{{ item.ip }}</td>
    <td>{{ item.hostname }}</td>
    <td>{{ item.mac }}</td>
    <td>{{ item.last_discovery_time }}</td>
    
    #通过添加contenteditable="true"属性将该表格变为可编辑，当失去聚焦时触发edit函数，get_remark($event)是获取当前修改的值
    <td contenteditable="true" @blur="edit(item.ip,get_remark($event))" v-text="item.remark">
        {{item.remark}}
    </td>
    
</tr>

methods方法：

methods: {
    #获取可编辑表格编辑后的值
    get_remark($event){
      this.remark = $event.target.innerText;
      return this.remark
    },
     #将ip，remark传给后端
    edit(ip,remark){
      console.log(ip,remark)
      axios
          .post("http://127.0.0.1:5000/display/edit", {
            ip: ip,
            remark: remark
          })
          .then((response) => {
            console.log(response.data)
            this.ip_dict = response.data.ip_dict;
            this.update_time = response.data.update_time
          })
          .catch(function (error) {
            console.log(error)
          });
    },
}

Vue 把获取到的可编辑表格的值传给后端

原文：https://www.cnblogs.com/zhface/p/15208794.html