如何在 vue.js 中添加 v-model 动态创建的 html？答案

【问题标题】：How to add v-model dynamically created html in vue.js?如何在 vue.js 中添加 v-model 动态创建的 html？
【发布时间】：2016-04-09 12:33:34
【问题描述】：

我使用 vue.js。我想在使用 jquery 插件创建的选择器中添加 vue 模型。我的代码：

<div class="app">
   <div class="wysiwyg-wrap"></div>
</div>

<script>
    new Vue({
        el: '.app',
        data: {
            wysiwygText: 'text demo'
        },
        created: function(){
            $('.wysiwyg-wrap').trumbowyg();
        } 
    });
</script>

Jquery 插件 trumbowyg 在 '.wysiwyg-wrap' 内创建许多 html 元素。如何添加其中一个元素 v-model 绑定？我想输入我的编辑器并将结果保存在 vue 模型中的“所见即所得文本”中。感谢您的任何回答！

【问题讨论】：

标签： javascript jquery vue.js

【解决方案1】：

这是自定义指令的一个很好的用例。下面是一个将 jQuery 功能添加到 Vue 的自定义指令示例：https://vuejs.org/examples/select2.html

【讨论】：

我想使用组件 insthead 指令。但是如何在动态创建的标签中设置模型呢？

【解决方案2】：

你可以创建一个简单的指令

Vue.directive('wysiwyg-wrap', function () {
   $(this.el).trumbowyg();
});

然后将它附加到任何元素上

<div class="app">
   <div v-wysiwyg-wrap></div>
</div>

【讨论】：