rachid_rafia
1 week ago
77
1
Vue

VueJS dynamically add textareas (Tinymce issue)

Posted 1 week ago by rachid_rafia

Thank you.I built a dynamic form where the user has the option to add as many HTML textareas as possible. The problem I'm running into is when the user loads the next textarea, I lose tinymce. Same thing happening for any external script (example: datepicker and Select2.js). Any ideas?

Here is my code

   <div v-for="index in counter" :key="index">
       <email_template_row></email_template_row>
       <hr>
  </div>
  <button class="btn btn-sm btn-success" @click="addRow" type="button">Add Row</button>
  // Tinymce code here...
  // load vuejs from cdn...
        Vue.component('email_template_row', {
             template: '<div><textarea name="col_2_content[]" class="form-control tinymce" placeholder="Body">. 
            </textarea></div>',
         });
          var vue = new Vue({
             el: '#app',
             data:{
              counter: 1
            },
            methods: {
               addRow: function () {
                    this.counter += 1;
                }
             },
         });

Thank you.

Please sign in or create an account to participate in this conversation.