Vue.js中v-if切换仅生效一次问题求助

看起来你遇到的是Vue响应式系统的典型问题——属性变更没被检测到，导致视图无法同步更新。咱们一步步拆解原因和解决办法：

核心原因分析 #

1. 响应式属性缺失：你的menus数组里第二个对象没有初始化showPicker属性。Vue在实例初始化时，只会把已存在的属性转为响应式，后续新增的属性（比如你通过_this.showPicker = !_this.showPicker给第二个对象新增的showPicker）不会自动成为响应式属性，所以变更时无法触发视图更新。
2. 数组元素属性修改的响应式限制：即使对象有初始属性，直接通过索引修改数组中对象的属性（this.menus[button_index].showPicker = ...），在部分场景下Vue无法检测到这个变化——因为Vue对数组的响应式监听主要针对push/splice这类方法，或是直接替换数组，而非直接修改索引对应的元素属性。

具体修复步骤 #

1. 统一初始化响应式属性 #

先给menus数组里的所有对象都加上showPicker初始值，让Vue初始化时就能把它转为响应式：

menus: [
    {
        "name": "Menu item 1",
        "trigger_type": null,
        "trigger_value": null,
        "remainingCount" : 30,
        "maxCount" : 30,
        "message": '',
        "hasError": false,
        "showPicker" : false
    },
    {
        "name": "Menu item 2",
        "trigger_type": null,
        "trigger_value": null,
        "showPicker": false // 新增这个初始属性
    }
]

2. 用Vue响应式API修改属性 #

修改showPicker方法时，不要直接修改对象属性，而是用this.$set确保变更被响应式系统检测到，或是通过替换数组元素的方式触发更新：

方法一：使用this.$set

showPicker: function(event, button_index) {
    // 阻止事件冒泡，避免触发父元素的open_button_details方法
    event.stopPropagation();
    const menuItem = this.menus[button_index];
    this.$set(menuItem, 'showPicker', !menuItem.showPicker);
}

方法二：重新赋值数组（替换元素）

showPicker: function(event, button_index) {
    event.stopPropagation();
    // 复制原数组，修改对应元素后重新赋值
    const newMenus = [...this.menus];
    newMenus[button_index] = {
        ...newMenus[button_index],
        showPicker: !newMenus[button_index].showPicker
    };
    this.menus = newMenus;
}

3. 阻止事件冒泡（额外优化） #

你的内部div和父div都绑定了click事件，点击内部div时会同时触发父元素的open_button_details方法，这大概率不是你想要的行为。所以在showPicker方法里加上event.stopPropagation()，确保只有内部点击事件被触发。

验证效果 #

做完以上修改后，点击内部div时，showPicker的变更会被Vue的响应式系统检测到，v-if就能正常切换元素的显示和隐藏了。

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