vue.js - 使用 Vue.js 更改 Prop 后可编辑 div 中的插入符号位置

Question

我正在使用 Vue.js 并具有以下代码。当我输入 div 并且更新 this.content 时，插入符号总是重置为开头。

<template>
<div> 
  <div contenteditable="true"
    v-html="content"
    @input="onContentChange($event)">
  </div>
</div>
</template>
<script>
export default {
  props: ['content'],
  methods: {
    onContentChange: function(e) {
      this.content = e.target.innerHTML;
    },
  }, 
}
</script>
<style>
</style>

如何保留插入符号的位置并更新内容？

我看过其他一些类似的帖子，但那里的解决方案要么不适用于 Vue.js，要么不适用于我的情况，要么我可能没有正确应用它们。

Answer 1

我已经测试了几个场景，我认为您真正需要的显然是 Create a reusable editable component in this post .

但是，如果您想将所有内容都放在一个组件中，在 chrome 中可以使用以下代码:

<template>
  <div
    ref="editable"
    contenteditable
    @input="onInput"
  >
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: 'hello world'
    }
  },
  mounted () {
    this.$refs.editable.innerText = this.content
  },
  methods: {
    onInput (e) {
      this.content = e.target.innerText
    }
  }
}
</script>

请注意，在这种情况下，Chrome 中的 Vue 插件似乎无法正确更新 content 的值，因此您必须单击 vue 插件右上角的刷新。