Javascript 仅在VUE中的一个元素上切换类

我现在尝试了以下代码：

<pre id="index1" v-bind:class="[isActive ? 'shown' : 'hidden']" @click="isActive = !isActive">
  {{item.proposalResponse.insertObjects[0]}}
</pre>

...

data() {
  return {
    isActive: false
  };

...
<style>
  .hidden{
    height: 40px;
    overflow: hidden;
    background-color: powderblue;
  }
  .shown {
    background-color: powderblue;
  }
</style>

{{item.proposalResponse.insertObjects[0]}
...
数据（）{
返回{
isActive:错误
};
...
.隐藏{
高度：40px；
溢出：隐藏；
背景色：粉蓝色；
}
.显示{
背景色：粉蓝色；
}

这段代码的问题是，它生成了许多这样的元素，并且所有这些元素都同时切换

我想有它，所以只有我点击的元素将切换

---

我对js和vue.js都是新手，所以请友好：）

下面的答案为您的问题介绍了许多解决方案。谢谢。通过将其取出到组件中解决：）