javascript - 关于表格span和input切换

问题描述

问 题

表格中平时显示是span 点击之后变为input

 <span v-if="!editing" @click="edit()" >{{item.wenzi}}</span>
   <input type="text" 
   v-el:input v-if="editing" 
   v-on:keyup.enter="blur()" 
   value="{{item.wenzi}}" 
   v-model="item.wenzi" >
                   
                   

 methods: {
    blur: function () {
      this.editing = false
    },
    edit: function () {
      this.editing = true
      this.$nextTick(function () {
        this.$els.input.focus()
      })
    },

解决方案

模擬測試你的代碼，正常耶...
有什麼詳細的報錯嗎？

不過你有個地方寫錯了
v-on:keyup.enter="blur()" 應該改成 @blur="blur" 才會在失焦時變成 span

模擬

这篇关于javascript - 关于表格span和input切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！