Loops 我的条件类绑定是将类绑定到对象中迭代的所有对象。我做错了什么？

我从对Last.FM的API调用中返回了一个对象，它返回了我最近听过的100首歌曲的对象。如果当前正在播放，则对象中的第一个项目上有一个“正在播放”标志

如果是这样的话，我正在尝试将一个类绑定到标记，我很接近。唯一的问题是，如果满足了条件，它会将类绑定到从对象迭代的所有内容

我做错了什么

这里是一个来自返回对象的示例片段

      {
        "artist": {
          "mbid": "9457a08d-a2d0-4f2d-9876-b8870612d54f",
          "#text": "The Last Poets"
        },
        "@attr": {
          "nowplaying": "true"
        },
        "mbid": "3066a862-6c9a-4e21-b6bd-53e43257cbb4",
        "album": {
          "mbid": "96e8dd6c-6b49-462e-a6ea-202a3e2b1116",
          "#text": "Understand What Black Is"
        },
        "streamable": "0",
        "url": "https:\/\/www.last.fm\/music\/The+Last+Poets\/_\/Understand+What+Black+Is",
        "name": "Understand What Black Is"
      },
      {
        "artist": {
          "mbid": "77b29df2-056e-409e-a1b2-5e2bbfe421c4",
          "#text": "Awolnation"
        },
        "album": {
          "mbid": "1f7c0747-0207-441d-acad-a55ec0530b1f",
          "#text": "Back From Earth"
        },
        "streamable": "0",
        "date": {
          "uts": "1560027115",
          "#text": "08 Jun 2019, 20:51"
        },
        "url": "https:\/\/www.last.fm\/music\/Awolnation\/_\/Sail",
        "name": "Sail",
        "mbid": "0960742a-7040-435e-a2ef-c11abec3b913"
      }     

在标记中，我对对象进行了如下迭代

                    <li v-for="(track, index) in recentTracks" :key="`track-${index}`" class="track" v-bind:class="'track-' + index" style="background-image: url('http://www.placecage.com/100/100')">
                        <span v-bind:class="{ 'playing': 'track.@attr.nowplaying' }">{{track.artist['#text']}} - {{track.name}}</span>
                    </li>
                </ul>

{{track.artist['#text']}}-{{track.name}}

---

这导致每个

li

都有播放类

似乎您在

中包装了
曲目。@attr.nowplaying
，

，这使得它将其作为字符串进行计算（因此，总是计算为true，将所有项目都赋予播放类）。尝试删除

”

{{track.artist['#text']}}-{{track.name}}

要在不修改数据的情况下实现此功能，请执行以下操作：

“track.@attr.nowplaying”

周围的引号导致它被视为字符串，这被认为是所有项目的真实值

简单地删除引号是行不通的，因为

@

符号不能出现在令牌中（不像

$

和

\

符号那样可以）。因此，您需要使用方括号形式来访问属性

这仍然不起作用，因为并非所有项目都具有

@attr

属性。对于那些不这样做的人，

track['@attr']

将是

未定义的

，尝试访问

nowplaying

将导致错误。我在表达式的开头添加了一个额外的检查

我还做了一些附带的更改，使用了

：class

而不是

v-bind:class

和

播放
，而不是
“播放”
。两者都不需要让它发挥作用

这些数据似乎是XML转换为JSON的，结果是它不是特别干净的JSON。如果是我，我想在尝试在UI中使用数据之前，我会进行一些操作，将数据转换成更好的形式。e、 g.重命名属性并在适当的地方应用适当的类型。
我不知道用字符串包装。我这样做是因为我在{'playing'：track.@attr.nowplaying}
中得到了
无效的表达式：无效或意外的标记。我已经尝试过
跟踪['@attr'].现在播放
，但这让我无法读取控制台中未定义的
的属性'nowplaying'，在@attr对象中肯定是一个nowplaying属性，但是我得到了错误，说未定义。我试着做track.date.uts时也是一样谢谢你的建议。我还不知道如何重命名对象属性。我不明白你的方法为什么奏效。我认为类只会在track.@attr.nowplaying存在时绑定，如果不存在，则不会执行任何操作，类似于if语句，因为我编写的内容与
if（track.@attr.nowplaying==true）
相同，并且不存在的属性与您建议的false/null不一样？@DipoOgunmodede，它与
if
相同。一个
if
会有完全相同的问题。这里的问题不是现在播放的
是
未定义的
，而是
@attr
是
未定义的
。您正试图访问
undefined
的
nowplaying
属性，这将引发错误。这不是Vue，而是JavaScript如何处理访问
未定义
或
空
属性的尝试。