How to add v-model dynamically created html in vue.js?

Question

I use vue.js. I want add vue model in selector, who created using jquery plugin. My code:

<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 plugin trumbowyg create inside '.wysiwyg-wrap' many html elements. How to add in one of this elements v-model binding? I want type in my redactor and save result in 'wysiwygText' from vue model. Thank you for any answers!

Answer 1

This is a great use-case for custom directives. Here is an example of a custom directive that adds jQuery functionality to Vue: https://vuejs.org/examples/select2.html

Answer 2

You can create a simple directive

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

Then attach it to any element

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