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

Question

我使用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模型绑定？ 我想输入我的编辑器并将结果从vue模型保存到“ wysiwygText”中。 感谢您的任何答复！

Answer 1

这是自定义指令的绝佳用例。 这是将jQuery功能添加到Vue的自定义指令的示例： https : //vuejs.org/examples/select2.html

Answer 2

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

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

然后将其附加到任何元素

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