Как сохранить собственный фон для элемента в массиве и перемещаться вместе с элементом при сортировке массива? (Vue. js) - PullRequest
Новая
       12

Как сохранить собственный фон для элемента в массиве и перемещаться вместе с элементом при сортировке массива? (Vue. js)

0 голосов
/ 06 мая 2020

Итак, у меня есть массив изображений в родительском компоненте с функцией сортировки, каждое изображение имеет функцию выбора фона (белый, черный, прозрачный), поэтому средство выбора фона работает нормально, но когда я прибегаю к массиву, фон остается в в том же положении, а не в движении вместе с изображением, есть идеи, как это исправить?

вот мой код ..

Родительский компонент: 

<ChildComponent v-for="(item , i) in myList" :key="i" :item="item">
    </ChildComponent >

Дочерний компонент: 

<template>
    <v-card>
    <v-hover>
        <template v-slot:default="{ hover }">
            <v-img :src="item.Url" contain align="center" :class="backdrop" max-height="170">
                <v-fade-transition>
                    <v-overlay v-if="hover" opacity="0" absolute>
                        <v-chip fab color="white" x-small @click="setWhite">
                            <v-icon small color="black">mdi-plus</v-icon>
                        </v-chip>
                        <v-chip fab color="black" x-small @click="setBlack">
                            <v-icon small color="white">mdi-plus</v-icon>
                        </v-chip>
                        <v-chip fab @click="setClear" style="background: 
                             url(url(@/assets/transparent.png) repeat;" x-small>
                            <v-icon small color="black">mdi-plus</v-icon>
                        </v-chip>
                    </v-overlay>
                </v-fade-transition>
            </v-img>
        </template>
    </v-hover>


</v-card>
<template>

<script>
methods: {
        setWhite() {
            this.backdrop = "white";
        },
        setBlack() {
            this.backdrop = "black";
        },
        setClear() {
            this.backdrop = "clear";
        },
}
</script>

<style>
.white {
    background-color: white;
}

.black {
    background-color: black;
}

.clear {
     background: 'url(@/assets/transparent.png)'repeat;
        repeat;
}
</style>
...