vue点击按钮后旁边的文字变为可编辑，使用contenteditable无效

Question

问题描述

我需要点击编辑之后，然后上面的文字变成输入框直接进行编辑，该怎么实现

    <div class="checkpoints-title" @click="editAddCheckpointsTitle(item)" >{{item.title}}</div>
    <div @click="editAddCheckpoints(item)" class="checkpoints-operation-edit">
         <i class="el-icon-edit-outline"></i>
    </div>

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

可以在div下面加一个input 点击编辑按钮隐藏div显示input

<div class="checkpoints-title" @click="editAddCheckpointsTitle(item)" v-show='item.isShow'>
{{item.title}}
</div>
<input type='text' v-model="item.title" v-show='!item.isShow'>

<div @click="editAddCheckpoints(item)" class="checkpoints-operation-edit">
      <i class="el-icon-edit-outline"></i>
</div>
editAddCheckpoints(item){
    item.isShow = !item.isShow
}

Answer 2

换个思路：
如果不需要图文，只是纯文本的话，是不是可以考虑把div换成无边框的textarea，点击编辑按钮只是添加边框样式，以及使textarea自动获取焦点。

Answer 3

试了一下contentEditable是有效的

<div>
    <div ref="div">
        14而且客家话艰苦下次不能再新街口唇红齿白
    </div>
    <button @click="btn">点击</button>
</div>

btn() {
    this.$refs.div.contentEditable = true
    this.$refs.div.focus() //获取焦点
}

Answer 4

还是用textarea吧，用contentEditable，我发现如果没有文字，就选不中的问题