Vue Сделать только один конкретный компонент из V-для реагировать на опору, а не другие - PullRequest
Новая
       1

Vue Сделать только один конкретный компонент из V-для реагировать на опору, а не другие

0 голосов
/ 01 июля 2019

проблема: Vuejs, есть компонент (загрузка файла), который отображается внутри родительского элемента в цикле v-for.Я передаю ему подпорку для условного рендеринга кнопки удаления (в основном удаляет фон из вида предварительного просмотра div).Как мне сделать только определенный компонент из этого цикла, чтобы он реагировал на отображение / скрытие, а не другие?Например, v-for отображается 3 FileUpload компонентов.Все получили isRemoveBtnShown проп.Как заставить FileUpload1 показывать кнопку, а FileUplod2 and 3 не показывать?

parent: 

<FileUpload v-for="(field, index) in uploadFieldsToRender"
                    ref="file-upload"
                    :key="field"
                    :docPageTitle="field"
                    :isLoading="isLoading"
                    :shouldDocsBeScanned="shouldDocsBeScanned"
                    :isUploadError="isUploadError"
                    :isRemoveBtnShown="isRemoveBtnShown"
                    @fileUpload="handleFileUpload"
                    @fileRemoval="handleFileRemoval"
                    @fileScan="handleFileScan"
                    @fileUploadMounted="onFileUploadMounted"
                />

FileUpload: 

        <div v-else class="controls">
            <button
                v-if="shouldDocsBeScanned"
                class="button btn-scan"
                @click="() => $emit('fileScan', this.$refs)"
            >
                <span class="btn-icon"></span>
            </button>
            <div v-if="true" class="upload-options">
                <label>
                    <input
                        type="file"
                        class="image-upload"
                        accept="image/*, application/pdf"
                        @change="$event => this.$emit('fileUpload', $event, this.$refs)"
                    />
                </label>
            </div>
            <button
                v-if="isRemoveBtnShown"
                class="button btn-remove"
                @click="() => this.$emit('fileRemoval', this.$refs)"
                >
                <span class="btn-icon"></span>
            </button>
        </div>

реквизиты: 

        shouldDocsBeScanned: {
            type: Boolean,
            default: false
        },
        isRemoveBtnShown: {
            type: Boolean,
            default: false
        },

Не могу использовать $refs, поскольку они не реактивны (возможно, проверили, если у cmp фон или нет) Большое спасибо!

1 Ответ

0 голосов
/ 01 июля 2019

выяснил способ исправить мою проблему 1) перемещение isRemoveBtnShown в FileUpload само 2) присвоение FileUpload cmp в родительском ref его field, затем получить мой текущий компонент с помощью this.$refs[field] и изменить его внутреннюю опору (isRemoveBtnShown) на желаемую.

Работает как заклинание, нет братьев и сестер FileUpoload с

...