Answer the question
In order to leave comments, you need to log in
Why does :class only work after re-rendering a component?
Good afternoon, I'm new to vue, please tell me how to solve the problem.
I have a component in which there is an img and a (Photoload) input file component that is customized: In the Photoload component, I receive files, then I overwrite the resulting
FileList
into an array using:
Array.prototype.push.apply( fileBuffer, images );
( FileBuffer - array, images - filelist )
. component ( Initial ) this array, and using the v-for tool, I render my photos in the interface:
<div
v-for="(itemCover,key,index) in cover.images"
:class="{ error: itemCover.errors.format == true }"
class="gallery-list__item"
>
<img :src="itemCover.src" alt="">
<div
@click="deleteImage(key, cover.images)"
class="gallery-list__item__delete">
<IconDeleteimage></IconDeleteimage>
</div>
<div
v-if="itemCover.errors.size === true || itemCover.errors.format === true"
class="gallery-list__item-errors">
<div class="gallery-list__item-errors__icon">
<IconErrorImage></IconErrorImage>
</div>
<div class="gallery-list__item-errors__text">
<div
v-if="itemCover.errors.size == true"
class="gallery-list__item-errors__text--size">
Неверный размер
</div>
<div
v-if="itemCover.errors.format == true"
class="gallery-list__item-errors__text--format">
Неверный формат
</div>
</div>
</div>
</div>
[
{
"src": "blob:http://localhost:3000/1ebb6748-c2d0-436a-86f1-a04754a2f1a9",
"errors": {
"format": true,
"size": false
},
"dimensions": {
"width": 211,
"height": 130
},
"format": 1.623076923076923
},
{
"src": "blob:http://localhost:3000/0c65abb5-8135-41d6-b870-bc091b623fbc",
"errors": {
"format": true,
"size": false
},
"dimensions": {
"width": 519,
"height": 888
},
"format": 0.5844594594594594
},
{
"src": "blob:http://localhost:3000/77ca2d74-6c76-42a6-9593-2f79d3e012ac",
"errors": {
"format": true,
"size": false
},
"dimensions": {
"width": 396,
"height": 102
},
"format": 3.8823529411764706
},
{
"src": "blob:http://localhost:3000/0af92228-adaa-4766-88ff-627ff1c3e5f3",
"errors": {
"format": true,
"size": false
},
"dimensions": {
"width": 990,
"height": 622
},
"format": 1.5916398713826367
},
{
"src": "blob:http://localhost:3000/941bd2c4-5155-4e0b-b6e6-6dea1185f6ee",
"errors": {
"format": true,
"size": false
},
"dimensions": {
"width": 960,
"height": 719
},
"format": 1.3351877607788596
},
{
"src": "blob:http://localhost:3000/696f47c0-8645-4bb7-8bb8-9849a0d94f02",
"errors": {
"format": false,
"size": false
},
"dimensions": {
"width": 800,
"height": 450
},
"format": 1.7777777777777777
}
]
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question