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

Question

我现在尝试了以下代码：

<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>

此代码的问题在于，它会生成大量这些元素，并且所有元素都同时切换。

我想拥有它，因此只有我单击的元素才能切换。

我对js和vue.js都是陌生的，所以请客气：）