1. 程式人生 > 其它 >Vue 把獲取到的可編輯表格的值傳給後端

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