如何在 v-html 中以两种方式进行数据绑定？

Question

我有一个元素 div，其属性 contenteditable="true"。 div 的行为类似于元素文本区域。

<div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div>

我的代码：

data() {
     return {
        msg: '',
     }
},

methods: {
     enviaMensagem() {

        console.log(this.msg);

     }
}

我的问题是数据绑定不起作用。 div 中键入的内容不会反映在变量上。有谁知道它会是什么？

Answer 1

你需要监听元素的变化，因为v-model只对<textarea>或<input>有效。您可以使用 @input 侦听器来执行此操作。

您得到的标记将被转义。如果你想取消转义，你可以使用例如this approach。然后，您实际上在伪文本区域字段旁边有了标记。那么，为什么不从头开始使用 <textarea>？

new Vue({
  el: '#editor',
  data: {
    msg: ''
  },
  methods: {
    typing: function(el) {
      this.msg = el.target.innerHTML;
    },
    submit: function() {
      console.log("Submitting: ", this.msg);
    }
  }
});

.input {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid black;
  width: 200px;
  height: 100px;
}
.output {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  background: #eee;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>

<div id="editor">
  <div class="input" @input="typing" @keyup.enter="submit" contenteditable="true"></div>
  <div class="output" v-html="msg"></div>
</div>

如何在 v-html 中以两种方式进行数据绑定？

How to do databind two way in v-html?

vue.js

vue-component

vuejs2