I came across a codepen showcasing how @input can be combined with contentEditable to create a custom input DOM without using an actual input element. However, I encountered issues trying to incorporate @input with JSX in VueJS. Is it not feasible to do so in JSX?
Below is the demo showing @input functionality without JSX implementation:
https://codepen.io/supraniti/pen/Lypobx?editors=0010
Thank you.
JS
Vue.component('editable',{
template:'<div contenteditable="true" @input="update"></div>',
props:['content'],
mounted:function(){
this.$el.innerText = this.content;
},
methods:{
update:function(event){
this.$emit('update',event.target.innerText);
}
}
})
var example = new Vue({
el: '#example',
data: {
text:"This text is editable!"
}
});
HTML
<div id="example">
<editable :content="text" @update="text = $event"></editable>
<div>
<pre>{{$data |json }}</pre>
</div>
</div>