zoukankan      html  css  js  c++  java
  • 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)
              });
        },
    }
    
  • 相关阅读:
    Java 连接 Memcached 服务
    Memcached命令-存储命令-查找命令-清理命令
    memcache安装
    Python爬虫模拟登录带验证码网站
    HashMap原理
    redis 在java中的使用
    redis 事务
    Redis命令续
    Redis命令
    ApplicationListener用法
  • 原文地址:https://www.cnblogs.com/zhface/p/15208794.html
Copyright © 2011-2022 走看看