Laravel VueJS根据用户单击动态添加文本区域（tinymce问题）

我构建了一个动态表单，用户可以选择添加尽可能多的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;
                }
            },
        });

添加行
//Tinymce代码在这里。。。
//从cdn加载vuejs。。。
Vue.component（'email\u template\u row'{
模板：“”，
});
var vue=新的vue({
el:“#应用程序”，
数据：{
柜台：1
},
方法：{
addRow:函数（）{
这个计数器+=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
    });
}

---

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

---

您可能不应该使用使用VueJS操作DOM的外部库，因为除了tinymce之外，还有一种替代方法，datepicker、select2js不会使用VueJS操作DOM？是；有很多选择。这可能会有帮助。谢谢你的帮助。tinymce在哪里？？datepicker和Select2.js在哪里？？？您可能不应该使用使用VueJS操作DOM的外部库。除了tinymce，datepicker和select2js之外，还有一种选择不会使用VueJS操作DOM？是；有很多选择。这可能会有帮助。谢谢你的帮助。tinymce在哪里？？datepicker和Select2.js在哪里？？？