Vue.js 将 isActive 添加到 v-for 中的 class 名称和绑定中的动态 class 名称

Question

我有以下循环遍历 store.js 中的一些数据，这一切都很好，但是我想将 vue 处于活动状态添加到多边形的 class，但是我无法继续不破坏 note.content_type 的语法，提供动态 class 名称。

一旦我可以在这个元素上设置 { active: isActive } 我想我知道如何将它添加到我的数据中并在点击或单击时更改它。

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="800" id="space" ref="sheets">
          <g
            v-for="(note, index) in notes"
            :key="'note'+index"
            :transform="`translate(${note.xpos}, ${note.ypos})`"
            class="draggable"
          >

            <polygon
              v-if="note.content_type == 'link'"
              points="9.500000000000002,16.454482671904334 -19,2.326828918379971e-15 9.499999999999986,-16.45448267190434"
              fill="#989898"
              :class="note.content_type"
              :id="note.id"
            />

          </g>

再次感谢

Answer 1

抱歉刚刚编辑 - 使用数组语法而不是对象：

<polygon
  v-if="note.content_type == 'link'"
  points="9.500000000000002,16.454482671904334 -19,2.326828918379971e-15 9.499999999999986,-16.45448267190434"
  fill="#989898"
  :class="[ note.content_type, isActive ? 'active' : '']"
  :id="note.id"
/>

Vue.js 将 isActive 添加到 v-for 中的 class 名称和绑定中的动态 class 名称

Vue.js add isActive to class name within a v-for and dynamic class names in the bind

javascript

css

vue.js