Javascript 在Vue中切换可见性无法正常工作

我正在从事一个项目，在这个项目中，我从websocket接收数据，然后将其解析为适当的UI。我遇到的问题是，当我尝试切换特定“代理”的“组件”时，显示/隐藏功能无法正常工作。现在我有一个“AgentsButton”组件，它位于“Config”组件内部，当我在配置（父）组件中应用相同的逻辑时，它工作得很好，但由于某种原因，子组件没有完成我希望它完成的任务。下面是我为子组件（“AgentsButton”）编写的代码

<template>
  <div>
    <b-row id="agentRow">
      <b-col v-for="agent in agents" md="auto">
        <b-button class="agentButton" @click="compVisible = true">{{ agent.name }}</b-button>

        <b-container v-if="compVisible" id="componentsDiv">
          <h3>Component-Types</h3>
          <div v-for="item in agent.componentTypes">
            <b-row>
              <b-col md="12">
                <b-button type="button" class="componentItem" @click="openModal(item)">
                  {{ item }}
                </b-button>
              </b-col>
            </b-row>
          </div>
        </b-container>
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  name: 'AgentButtons',
  components: {},
  props: ['agents', 'components'],
  data() {
    return {
      compVisible: false,
    };
  },

  methods: {
    clickEvent() {
      this.$emit('clicked');
      console.log('clickEvent');
    },
    showComponents() {
      this.compVisible = true;
      console.log(`compVisible: ${this.compVisible}`);
    },
  },
};
</script>

{{agent.name}
组件类型
{{item}}
导出默认值{
名称：“代理按钮”，
组件：{}，
道具：[“代理”，“组件”]，
数据（）{
返回{
compVisible:false，
};
},
方法：{
clickEvent（）{
这是。$emit（'clicked'）；
console.log（'clickEvent'）；
},
showComponents（）{
this.compVisible=true；
log（`compVisible:${this.compVisible}`）；
},
},
};

---

在此问题上的任何帮助都将不胜感激。谢谢

这里有很多信息似乎与所问的问题无关，而实际问题并没有明确说明。也就是说，我注意到您的两个方法都没有从模板中调用。代理按钮只执行

compVisible=true

。也许这是相关的，但我还是不太明白什么是不起作用的。这里有很多信息似乎与所问的问题无关，而实际问题并没有明确说明。也就是说，我注意到您的两个方法都没有从模板中调用。代理按钮只执行

compVisible=true

。也许这是有关系的，但我还是不明白什么是不起作用的。