Vue.js数组更新问题：addItemArray添加元素后其他点击事件获取为空

看起来你遇到的问题是：通过jQuery绑定的点击事件向Vue的addItemArray添加数据后，在另一个点击事件中无法获取到数组元素，始终得到空数组。下面我会一步步拆解可能的原因，并给出对应的解决办法。

一、先确认：添加数据的事件是否真的触发了？ #

这是最容易忽略的第一步——你可以在push代码前加一行日志，确认点击提交按钮时是否真的执行了添加逻辑：

self.cacheDom.$submitItem.click(function () {
    console.log("提交按钮被点击了！"); // 新增这行日志
    self.addItemArray.push({ 
        'id': $('#accountSearch').data('id').trim(), 
        'name': $('#accountSearch').val().trim(), 
        'type': $('#accountDropdown option:selected').text().trim() 
    });
    console.log("当前数组内容：", self.addItemArray); // 查看添加后的数组
    $('.addItemMenu').hide();
});

如果控制台没有打印这两行日志，说明你的cacheDom.$submitItem没有正确获取到DOM元素，或者事件绑定时机不对：

• 解决办法：确保DOM渲染完成后再获取元素绑定事件，也就是把缓存DOM和绑定事件的代码放在Vue的mounted钩子中（而不是created，此时DOM还未生成）：

mounted() {
    this.cacheDom = {
        $submitItem: $('#你的提交按钮选择器')
    };
    var self = this;
    this.cacheDom.$submitItem.click(function () {
        // 你的添加逻辑
    });
}

二、检查另一个点击事件的this指向是否正确 #

如果添加数据的逻辑确实执行了，但另一个事件里拿不到数组，大概率是另一个事件的this没有指向Vue实例：

• 如果你是用jQuery绑定的另一个点击事件，直接用this.addItemArray会指向DOM元素，而不是Vue实例；
• 如果你是用Vue的@click绑定的方法，那this自然指向Vue实例，没问题。

解决办法：
用var self = this提前保存Vue实例的引用，或者用箭头函数（箭头函数会继承外部上下文的this）：

// 示例：jQuery绑定的另一个点击事件
mounted() {
    var self = this;
    $('#另一个按钮选择器').click(function() {
        console.log("数组内容：", self.addItemArray); // 用self代替this
    });
    // 或者用箭头函数更简洁
    $('#另一个按钮选择器').click(() => {
        console.log("数组内容：", this.addItemArray); // 箭头函数的this指向Vue实例
    });
}

三、推荐：尽量避免Vue和jQuery混用（从根源解决问题） #

在Vue项目里直接用jQuery操作DOM和绑定事件，很容易出现上下文混乱、响应式失效的问题。更符合Vue思想的写法是：

1. 用Vue指令绑定事件，不用jQuery的click绑定；
2. 用Vue的响应式变量控制DOM显示，不用$('.addItemMenu').hide()；
3. 用ref获取DOM元素，不用jQuery选择器。

改造后的代码示例： #

模板部分：

<!-- 用@click绑定Vue方法 -->
<button @click="submitItem">提交</button>
<!-- 用ref标记需要获取的元素 -->
<input type="text" ref="accountSearch" data-id="xxx">
<select ref="accountDropdown">
    <option value="1">类型1</option>
    <option value="2">类型2</option>
</select>
<!-- 用v-show控制菜单显示，代替jQuery的hide() -->
<div class="addItemMenu" v-show="isMenuVisible">
    <!-- 菜单内容 -->
</div>
<!-- 另一个点击按钮，用@click绑定方法 -->
<button @click="checkArray">查看数组</button>

Script部分：

export default {
    data() {
        return {
            addItemArray: [],
            isMenuVisible: true // 控制菜单显示的响应式变量
        };
    },
    methods: {
        submitItem() {
            // 通过ref获取DOM元素，不用jQuery
            const accountEl = this.$refs.accountSearch;
            const dropdownEl = this.$refs.accountDropdown;
            
            const newItem = {
                id: accountEl.dataset.id.trim(),
                name: accountEl.value.trim(),
                type: dropdownEl.options[dropdownEl.selectedIndex].text.trim()
            };
            
            this.addItemArray.push(newItem);
            this.isMenuVisible = false; // 用响应式变量隐藏菜单
        },
        checkArray() {
            // 这里的this肯定指向Vue实例，能正确获取数组
            console.log("当前数组：", this.addItemArray);
        }
    }
};

这种写法完全遵循Vue的响应式机制，不会出现上下文混淆的问题，也更易于维护。

内容的提问来源于stack exchange，提问作者Kiran Raj R