Vue 把獲取到的可編輯表格的值傳給後端
阿新 • • 發佈:2021-08-31
前端程式碼:
<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) }); }, }