Question

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

<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创建内部＆＃39; .wysiwyg-wrap＆＃39;许多HTML元素。如何在这个元素中添加一个v-model绑定？我想输入我的编辑器并将结果保存在＆＃39; wysiwygText＆＃39;来自vue模型。谢谢你的答案！

Answer 1

这是自定义指令的一个很好的用例。以下是向Vue添加jQuery功能的自定义指令示例：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>

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

2 个答案: