Vue.js 将 isActive 添加到 v-for 中的类名和绑定中的动态类名答案

【问题标题】：Vue.js add isActive to class name within a v-for and dynamic class names in the bindVue.js 将 isActive 添加到 v-for 中的类名和绑定中的动态类名
【发布时间】：2020-01-11 04:58:57
【问题描述】：

我有以下循环遍历 store.js 中的一些数据这一切都很好但是我想将 vue is active 条件添加到多边形的类中，但是我不能在不破坏 note.content_type 的情况下处理语法，它提供了动态类名。

一旦我可以在这个元素上设置 { 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>

再次感谢

【问题讨论】：

标签： javascript css vue.js

【解决方案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"
/>

【讨论】：

是的，我刚刚意识到我需要使用数组而不是对象方法 - 谢谢
谢谢你，现在要找出我应该把 isActive 东西放在哪里而不引起很多麻烦
你可以创建一个函数来获取 note 对象并计算出一个 bool 值并将其返回给 :class 绑定？
谢谢大家，最后我在我的商店中添加了一个新值并从组件传回了值
还不错，不错:)