Vue中v-show未正常生效，菜单展开状态异常问题求助

问题根源 #

Vue 2 中直接修改数组内对象的属性（比如this.menus[index].showed = !menu.showed）无法被响应式系统检测到——这是因为 Vue 2 基于Object.defineProperty实现响应式，对数组元素的属性变更没有自动监听机制。所以修改后视图不会立即更新，只有当其他触发视图更新的操作（比如点击第二个菜单）发生时，才会顺带更新第一个菜单的状态。

另外代码里存在拼写错误：menus数组中对象的属性是decription，但模板里用的是menu.description，这会导致描述内容无法正常显示，需要统一拼写为description。

修复方案（基于现有代码） #

方案1：用this.$set触发响应式更新 #

修改handleSelect方法，通过this.$set修改对象属性，确保响应式系统能捕获到变更：

handleSelect(menu, index) {
  const newShowStatus = !this.menus[index].showed;
  this.$set(this.menus[index], 'showed', newShowStatus);
}

方案2：重新生成数组触发响应式 #

通过展开运算符创建新数组替换原数组，触发响应式更新：

handleSelect(menu, index) {
  this.menus = this.menus.map((item, i) => {
    if (i === index) {
      return {...item, showed: !item.showed};
    }
    return item;
  });
}

同时修正menus数组的属性拼写：

menus: [
  { 
    name: 'Introduction',
    showed: false,
    description: '这里是介绍内容'
  },
  { 
    name: 'Feedback Is Important',
    showed: false,
    description: '这里是反馈相关内容'
  }, 
  { 
    name: 'Client Briefing and Debriefing',
    showed: false,
    description: '这里是客户简报相关内容'
  },                                                                          
]

更优实现方案：组件化拆分 #

把每个菜单项拆分为独立组件，让每个组件自己管理展开状态，既避免数组响应式问题，也让代码结构更清晰：

子组件 MenuItem.vue #

<template>
  <li class="cursor-pointer p-2 flex">
    <div class="w-full flex items-center justify-between px-2" @click="toggleShow">  
      <div class="text-sm w-full">
        <i class="el-icon-document"></i> {{ menu.name }} 
      </div>
    </div>
    <ul class="py-4 px-1 rounded-b border-gray-100" v-show="showed">
      {{ menu.description }} 
    </ul>
  </li>
</template>

<script>
export default {
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showed: this.menu.showed || false
    };
  },
  methods: {
    toggleShow() {
      this.showed = !this.showed;
    }
  }
};
</script>

父组件中使用 #

<template>
  <ul>
    <menu-item v-for="(menu, index) in menus" :key="index" :menu="menu" />
  </ul>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
  components: { MenuItem },
  data() {
    return {
      menus: [
        { 
          name: 'Introduction',
          description: '这里是介绍内容'
        },
        { 
          name: 'Feedback Is Important',
          description: '这里是反馈相关内容'
        }, 
        { 
          name: 'Client Briefing and Debriefing',
          description: '这里是客户简报相关内容'
        },                                                                          
      ]
    };
  }
};
</script>

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