Question

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

如果是这种情况，我正在尝试将一个类绑定到标记，并且我已经关闭了。唯一的问题是，如果满足条件，则将类绑定到从我的对象迭代的所有对象。

我做错了什么？

要了解的是返回对象的示例片段

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

这会导致每个li都具有游戏级别

Answer 1

似乎您已经将^包裹在track.@attr.nowplaying中，这使其以字符串形式对其进行评估（因此，始终将其评估为true，为所有项赋予'类）。尝试删除playing。

Answer 2

要在不修改数据的情况下正常工作，将是这样：

<span :class="{ playing: track['@attr'] && track['@attr'].nowplaying }">

'track.@attr.nowplaying'周围的引号导致将其视为字符串，这对于所有项目而言都是真实的。

仅删除引号将不起作用，因为@符号不能出现在令牌中（与符号$和_不同）可以。因此，您需要使用方括号形式来访问属性。

这仍然行不通，因为并非您所有的商品都具有@attr属性。对于那些没有的用户，track['@attr']将是undefined，尝试访问nowplaying将导致错误。我在表达式的开头添加了一个额外的检查。

我还做了一些附带的更改，分别使用:class代替v-bind:class和playing代替'playing'。都不需要使它正常工作。

此数据似乎是XML转换为JSON，结果是它不是特别干净的JSON。如果是我，我想在尝试在UI内使用数据之前，我会做一些操作使其数据变得更好。例如重命名属性并在适当的情况下应用适当的类型。

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

2 个答案: