javascript - 如何在 Vuejs 中使用 @input 和 contentEditable 与 JSX 语法将 dom 转换为可输入的 dom？

Question

我找到了一个 codepen，它演示了可以将 @input 与 contentEditable 结合起来创建自定义输入 dom，而不必是输入元素。但是，我无法在 VueJS 中使用 JSX 添加 @input。难道不能用jsx吗？

这是不使用 JSX 的演示，@input 在常规 dom 中工作: https://codepen.io/supraniti/pen/Lypobx?editors=0010

谢谢

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>

Answer 1

啊啊啊啊啊。我在 JSX 中发现，您实际上可以在常规 span 上使用 onInput!

希望它能节省一些人的时间!