VueJS 根据用户点击动态添加文本区域（tinymce 问题）答案

【问题标题】：VueJS dynamically add textareas based on user click (tinymce issue)VueJS 根据用户点击动态添加文本区域（tinymce 问题）
【发布时间】：2020-03-26 20:24:38
【问题描述】：

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

谢谢。

【问题讨论】：

你可能不应该使用通过 VueJS 操作 DOM 的外部库
是否有替代tinymce、datepicker、select2js 不会使用VueJS 操作DOM？
是的；有很多选择。这可能会有所帮助github.com/vuejs/awesome-vue
感谢您的帮助。
tinymce 在哪里？？ datepicker 和 Select2.js 在哪里？？？

标签： laravel vue.js vuejs2

【解决方案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
    });
}

【讨论】：