VueJS中动态初始化Wysiwyg遇空对象错误的解决咨询

问题分析 #

你遇到的“无法转换空对象”错误，核心原因是：

• 原代码中v-for依赖的数组a未定义，点击按钮后也没有更新数组，导致新的textarea根本没渲染到DOM中，初始化函数找不到目标元素。
• 直接访问addCount而不是this.addCount，无法正确获取Vue实例的响应式数据。
• mounted钩子只执行一次，无法在DOM动态更新后触发初始化。

修正后的实现方案 #

1. 基础代码修正 #

先完善数据定义与渲染逻辑，确保点击按钮时能正确渲染新的textarea：

<button @click="addMore"> Add Wysiwyg </button> 
<fieldset v-for="(u, index) in a" :key="index">
    <textarea 
        :id='"emailwysiwyg"+index'
        name="body_email">
    </textarea>
</fieldset>

var App = new Vue({
    el: '#app', // 必须挂载到页面对应DOM元素
    data: {
        a: Array(1).fill(null) // 初始渲染1个textarea
    },
    methods: {
        addMore() {
            this.a.push(null); // 添加元素触发v-for渲染新textarea
            // 点击次数≥2时（即数组长度≥2）执行初始化
            if (this.a.length >= 2) {
                const newIndex = this.a.length - 1;
                // 等待DOM更新完成后再初始化
                this.$nextTick(() => {
                    this.InitiateWysiwyg(`#emailwysiwyg${newIndex}`, 'body_email');
                });
            }
        },
        InitiateWysiwyg(el, field_name) {
            // 执行Wysiwyg初始化逻辑，示例：
            const targetEl = document.querySelector(el);
            if (targetEl) {
                // 这里替换为你的富文本编辑器初始化代码，比如：
                // tinymce.init({ selector: el, toolbar: 'bold italic' });
                console.log('Wysiwyg初始化成功', el);
            } else {
                console.error('未找到目标DOM元素', el);
            }
        },
    }
})

2. 核心解决要点 #

• 用$nextTick等待DOM就绪：Vue修改数据后DOM更新是异步的，$nextTick会在DOM更新完成后执行回调，确保初始化时目标textarea已经存在。
• 依赖数组控制渲染：通过a数组的长度控制textarea数量，避免单独维护addCount导致的数据不同步问题。
• 只初始化新元素：每次仅针对最新添加的textarea（通过数组最后一个索引）执行初始化，避免重复操作已初始化的组件。
• 元素存在性校验：初始化前先判断目标DOM元素是否存在，防止意外报错。

3. 可选优化：用watch监听数组变化 #

如果需要更灵活的触发时机，可以通过watch监听数组变化，自动初始化新元素：

watch: {
    a: {
        handler(newVal) {
            if (newVal.length >= 2) {
                const newIndex = newVal.length - 1;
                this.$nextTick(() => {
                    this.InitiateWysiwyg(`#emailwysiwyg${newIndex}`, 'body_email');
                });
            }
        },
        deep: true // 监听数组内部元素变化
    }
}

内容的提问来源于stack exchange，提问作者DIR