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

Question

我正在一个项目中，我正在从Websocket接收数据，然后将其解析为适当的UI。我遇到的问题是，当我尝试切换特定“代理”的“组件”时，显示/隐藏功能无法正常工作。现在，我有一个“ AgentsButton”组件，位于“ Config”组件内，当我在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>

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