Как правильно установить класс "first" только в том случае, если ссылка на изображение работает и не возвращает ошибку? Я пробовал реализовать это в вычисляемом свойстве (computed), но это не работает. Вот мой код:
```html
<a class="piece"
v-for="(piece, i) in news" :key="piece.id"
:class="{first: i===0 && checkImageLoad}"
>
```
```javascript
methods:{
checkImageLoad() {
const s = this.news[0].image;
return new Promise((resolve) => {
const img = new Image();
img.src = s;
img.onload = () => {
resolve(false);
};
img.onerror = () => {
resolve(false);
};
});
}
}
```
Как исправить эту проблему?
Проблема в вашем коде заключается в том, что метод `checkImageLoad()` возвращает Promise, в то время как условие в вычисляемом свойстве требует булево значение. Вместо возвращения промиса, вы можете задать свойство `isLoadingImage` в `true`, когда проверка изображения выполняется, и изменить его на `false`, когда изображение загружено или не найдено. Затем вы можете использовать это свойство в классе `first`. Вот исправленный код:
```html
<a class="piece"
v-for="(piece, i) in news" :key="piece.id"
:class="{first: i===0 && !isLoadingImage}"
>
```
```javascript
data() {
return {
isLoadingImage: true
}
},
methods: {
checkImageLoad() {
const s = this.news[0].image;
const img = new Image();
img.src = s;
img.onload = () => {
this.isLoadingImage = false;
};
img.onerror = () => {
this.isLoadingImage = false;
};
}
},
mounted() {
this.checkImageLoad();
}
```
Теперь, если изображение загружается успешно или не найдено, класс `first` будет присвоен только в этом случае.
Назначайте класс в зависимости от значения свойства, которое будет устанавливаться в обработчиках onload и onerror. Например.