S
S
SPART4K2021-09-22 16:54:00
Vue.js
SPART4K, 2021-09-22 16:54:00

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
614b34d5749b8702816315.png
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>


:class and v-if rendering of errors only works after updating the parent component (if I click on the 'show other photos' button in my component's date, the value of a certain property changes to true and the entire list is expanded, or if I fill in the photo in another loader yet again, everything will be correct, but initially not, please help)

Here is an example of a file object that I draw:
[
    {
        "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
    }
]


vue vursion 2.6.14 ( Nuxt )

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question