使用div标签的contenteditable属性进行编辑

470 阅读1分钟

设置contenteditable 使得div可编辑,使用document.getElementById('idName').innerHTML获取div输入的内容;使用v-html对数据进行渲染;change方法无效

<div contenteditable :id="'shipowner'+ index" class="contentItem-box-inner" v-html="item.shipowner" @blur="handleInput(item, index, 1)" :title="item.shipowner">
    <span>{{ item.shipowner }}</span>
</div>
handleInput (value, index, type) {
        if (type == 0) {
            console.log(document.getElementById('captainName'+index).innerHTML, 'pppp')
            this.$set(value, 'captainName', document.getElementById('captainName'+index).innerHTML)
        } else {
            this.$set(value, 'shipowner', document.getElementById('shipowner'+index).innerHTML)
        }
        this.handleCount()
    },