点击数组元素（对象）显示错误菜单问题求助

问题原因 #

1. 重复DOM ID：循环生成的所有下拉菜单都使用同一个ID submenu-1，原生JS的getElementById只会返回第一个匹配的元素，导致点击任何按钮都只会操作第一个菜单（Joe的）。
2. 原生JS与Vue模式冲突：使用全局onclick调用原生JS函数操作DOM，不符合Vue的响应式开发思路，容易引发DOM操作不匹配的问题。

解决方案 #

方案1：给菜单生成唯一ID（最小改动） #

修改HTML模板，为每个菜单生成唯一ID，按钮点击时传递对应ID：

<table id="bigtable">
  <tr class="dropdown" v-for="(person, index) in filtered" :key="index">
    <td>
      <button class="dropbtn" onclick="toggle('submenu-{{index}}')">+ {{person[0].name}}</button>
      <div class="dropdown-content" :id="'submenu-' + index">
        <table style="width:100%">
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
          <tr v-for="item in person" :key="item.a">
            <td>{{ item.a }}</td>
            <td>{{ item.b }}</td>
            <td>{{ item.c }}</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

利用循环的index作为ID的一部分，确保每个菜单ID唯一，按钮点击时传递对应ID给toggle函数，即可正确操作对应菜单的显示隐藏。

方案2：Vue响应式控制（推荐） #

完全去掉原生JS的toggle函数，用Vue的响应式状态管理菜单显示隐藏，更符合Vue开发规范：

修改JS部分

function groupBy(array, key) {
  const result = {}
  array.forEach(item => {
    if (!result[item[key]]) {
      result[item[key]] = []
    }
    result[item[key]].push(item)
  })
  return result
}

new Vue({
  el: "#app",
  data: {
    persons: [{
      'name': "Joe",
      "a": "1",
      "b": "2",
      "c": "3"
    }, {
      'name': "Jane",
      "a": "4",
      "b": "5",
      "c": "6"
    }, {
      'name': "Joe",
      "a": "7",
      "b": "8",
      "c": "9"
    }],
    openMenus: {} // 存储每个菜单的展开状态
  },
  computed: {
    filtered() {
      return groupBy(this.persons, 'name');
    }
  },
  methods: {
    toggleMenu(name) {
      // 切换对应菜单的展开状态
      this.openMenus[name] = !this.openMenus[name]
    }
  }
});

修改HTML部分

<table id="bigtable">
  <tr class="dropdown" v-for="(person, name) in filtered" :key="name">
    <td>
      <button class="dropbtn" @click="toggleMenu(name)">+ {{name}}</button>
      <div class="dropdown-content" v-show="openMenus[name]">
        <table style="width:100%">
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
          <tr v-for="item in person" :key="item.a">
            <td>{{ item.a }}</td>
            <td>{{ item.b }}</td>
            <td>{{ item.c }}</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

通过openMenus对象记录每个人物菜单的展开状态，点击按钮调用Vue的toggleMenu方法切换状态，用v-show控制菜单显示隐藏，完全避免直接操作DOM，更稳定且符合Vue设计思想。

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