vue中有contenteditable属性的div如何数据双向绑定
昨天的工作中遇到了这样一个问题.场景是这样的:与一个第三方合作,对方将页面以及数据处理写好了给我们,但是技术栈不一样,对方是直接使用bootstrap+jquery+layer.js 来构建了两个页面.其中一个地方有大致如下代码:var num = $("#div1").text()这里是通过jQuery来获取div中的内容,但这里的div是有 contenteditable 这个属性的...
·
昨天的工作中遇到了这样一个问题.场景是这样的:与一个第三方合作,对方将页面以及数据处理写好了给我们,但是技术栈不一样,对方是直接使用bootstrap+jquery+layer.js 来构建了两个页面.其中一个地方有大致如下代码:
var num = $("#div1").text()
这里是通过jQuery来获取div中的内容,但这里的div是有 contenteditable
这个属性的.大家都知道,具有这个属性的元素是可编辑的.但我们自己的项目是使用vue进行数据的双向绑定的,而我又不想使用input来代替它原本的div元素.那么此时的情况应该如何在可编辑元素上实现数据双向绑定呢?解决方案如下:
// template部分
<div contenteditable v-html="divMsg" @input="inputDiv($event)"></div>
// js部分
const divMsg = ref('')
const inputDiv = e => {
divMsg.value = e.target.innerHTML
}
retuen {
divMsg,
inputDiv
}
这里因为我使用了的 @vue/composition-api
来提前感受一波vue的组合api写法,所以vue的写法可能和2.x版本有所不同,但思路是一模一样的.自此,问题得以解决.
更多推荐
已为社区贡献3条内容
所有评论(0)