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)
          });
    },
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM