Мой условный класс связывания связывает класс со всем, что повторяется в моем объекте.Что я сделал не так? - PullRequest
Новая
       35

Мой условный класс связывания связывает класс со всем, что повторяется в моем объекте.Что я сделал не так?

0 голосов
/ 09 июня 2019

Я возвратил объект из API-вызова в Last.FM, который возвращает объект из последних 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>

В результате каждый li имеет класс игры

Ответы [ 2 ]

1 голос
/ 09 июня 2019

Похоже, что вы завернули track.@attr.nowplaying в ', что заставляет его оценивать его как строку (и, следовательно, всегда оценивает как true, давая ВСЕМ элементам класс playing).Попробуйте удалить '. 

                    <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>
0 голосов
/ 09 июня 2019

Чтобы это работало без изменения данных, это было бы так: 

<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. Если бы это был я, я бы сделал некоторые манипуляции, чтобы привести данные в более привлекательную форму, прежде чем пытаться использовать их в пользовательском интерфейсе. например Переименование свойств и применение соответствующих типов в соответствующих случаях.

...