Question

<p contenteditable="true" v-bind="message"></p>

编辑HTML元素时，对象@message不会更改。使用Vue.js有没有简单的方法呢？

Answer 1

不幸的是，contenteditable不适用于Vue等v-model绑定，建议您使用medium.js之类的库来构建自己的组件。< / p>

但是，如果你只是想做一些简单的事情并保持数据同步，你可以自己做：

查看模型

new Vue({
  el: '#app',
  methods: {
    updateMessage() {
        this.message = this.$refs.message.innerText;
    }
  },
  watch: {
    message() {
      this.$refs.message.innerText = this.message;
    }
  },
  data: {
    message: 'Hello'
  }
})

<强> HTML

  <p ref="message" contenteditable="true" @keyup="updateMessage" class="editable">{{message}}</p>

正如您所看到的，您必须在使用contenteditable时自行处理更新DOM。我实际上在这里做的是使用ref来定位满足者，因此我可以通过this.$refs.message.innerText获取内部文本。我之后添加了一个@keyup事件，该事件调用updateMessage方法来更新message数据属性。然后我添加了一个watcher来反转这个过程，所以当消息更新时它会更新contenteditable。

这是JSFiddle：https://jsfiddle.net/3ngc9486/

Answer 2

是的，它有一个双向绑定指令v-model，但它只适用于输入元素。因此，不要使用p元素并使用复杂的JS处理它，而是使用带有textarea的{{1}}，它将开箱即用。

v-model

这是一个example。

Vue有双边绑定吗？

2 个答案: