本文介绍了Content edable div追加一个html元素，并在Vuejs中对其进行v建模的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的HTML代码。

  clisdfsdfsdfck to appen html
  

      

      
{{ html }}
  

这是js部件

let app = new Vue({
    el: '#app',
    data: {
        html: 'some text',
    },
    methods: {
        fakeVmodel: function(e){
            this.html = e.target.innerText;
        },
        renderHtml: function(){
          this.html += '';
        }
    }
});

问题是，当我单击按钮将html标记(Img)推送到我的变量(Html)时，它就起作用了。但在输入后，它将删除插入的标签部分。这是在Vue中成功添加到html代码的方法吗？

以下是代码示例 https://codepen.io/weretyc/pen/EwXZYL?editors=1010

推荐答案

主要问题： 该html因this.html = e.target.innerText;而消失。相反，请使用this.html = e.target.innerHTML;。innerHTML解析为完整的HTML内容。

次要问题： 键入后，光标将聚焦于div的开头。这是因为v-html导致div更新。

若要解决此问题，请确保v-html仅更新焦点输出时的div。

完整示例

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

let app = new Vue({
  el: '#app',
  data: {
    html: 'some text',
  },
  methods: {
    updateHtml: function(e) {
      this.html = e.target.innerHTML;
    },
    renderHtml: function(){
      this.html += '';
    }
  }
});

 
  click to append html
  

      

      

      
{{ html }}
  

这篇关于Content edable div追加一个html元素，并在Vuejs中对其进行v建模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持吉威生活！

[英文标题]contenteditable div append a html element and v-model it in Vuejs

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。