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!

Jeff · Accepted Answer · 2016-04-09 13:20:53Z

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

answered Apr 9, 2016 at 13:20

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

slava_slava Over a year ago

I want to use component insthead directive. But how to set model in dynamically created tag?

Ogie · Accepted Answer · 2016-04-09 16:35:43Z

1

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>

answered Apr 9, 2016 at 16:35

Ogie

1,3322 gold badges14 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related