VueJS динамически добавлять текстовые области в зависимости от клика пользователя (проблема tinymce)

Question

Я создал динамическую c форму, где пользователь может добавить как можно больше HTML текстовых областей. Проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь загружает следующую текстовую область, я теряю tinymce. То же самое происходит с любым внешним скриптом (пример: datepicker и Select2. js). Есть идеи?

Вот мой код

<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;
                }
            },
        });

Спасибо.

Answer 1

Вам необходимо повторно инициализировать эти компоненты после того, как один из них добавлен к HTML.

Таким образом, ваш addRow метод должен выглядеть следующим образом:

addRow: function () {
    this.counter += 1;

    tinymce.init({
      selector: 'textarea',  // change this value according to your HTML, you can be more specific
      auto_focus: 'element',
      // add your configuration
    });
}

Answer 2

используйте это

  <v-row justify="center" v-for="(input1 , index) in productOption" :key="index">
                                    <v-col sm="12" md="12" lg="4" >
                                        <v-text-field
                                                v-model="input1.frequency"
                                                :rules="[v => !!v || 'frequency required']"
                                                label="frequency*"
                                                filled

                                        ></v-text-field>
                                    </v-col>
                                    <v-col sm="12" md="12" lg="4" >
                                        <v-text-field
                                                v-model="input1.total_amount"
                                                :rules="[v => !!v || 'Total Amount  required']"
                                                label="Total Amount *"
                                                filled
                                                type="number"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col sm="12" md="12" lg="8" >
                                        <v-textarea
                                            v-model="input1.description"
                                            filled
                                            :rules="[v => !!v || 'Description is required']"
                                            label="Description*"
                                            ></v-textarea>
                                    </v-col>
                                     <div class="my-2">
                                        <v-btn depressed small color="error" @click="removeproductOption(index)"><v-icon dark>mdi-minus</v-icon></v-btn>
                                    </div>
                            </v-row>

, затем в vuejs верните данные

   productOption:[
        {
        description:"",
        frequency:"",
        total_amount:'',
    }
    ],

и затем в vuejs метод

   addproductOption() {
        this.productOption.push({
            description:"",
            frequency:"",
            total_amount:'',
        })
        },

    removeproductOption(index){
        if(index==0)
        {
            return
        }
        else{
        this.productOption.splice(index,1);
        }
    },