Vue dynamically changing background position - css

Question

I have a list of items that are background-image and I need to go down through each item down (-38px) and display all of them changing only the background-position
enter image description here
Should be displayed in a line
enter image description here
My vue code:
CraftPage:
<template>
<div class="page-wrap">
<my-nav-craft/>
<div class="wrap">
<div class="construct">
<div class="left">
<h3 class="title">Basic</h3>
<ul class="items">
<my-li-crafts :items="items"/>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import MyNavCraft from "#/components/navCraft/navCraft";
import MyLiCrafts from "#/components/navCraft/liCraft";
export default {
components: {MyLiCrafts, MyNavCraft},
data() {
return {
items: [
{id: 1, posX: 0, posY: 0},
{id: 2, posX: 0, posY: -38}
]
}
},
}
</script>
<style scoped>
.page-wrap{
width: 100%;
display: flex;
flex-direction: column;
max-width: 1200px;
justify-content: center;
margin: 0px auto;
}
.wrap {
width: 100%;
background-color: #c6c6c6;
border-radius: 20px;
padding: 26px 23px 8px;
}
.left {
float: left;
width: 340px;
clear: both;
margin-bottom: 5px;
}
.items{
list-style: none;
}
.items__item {
background-image: url("../assets/icon_sprite.png");
width: 36px;
height: 36px;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
</style>
My element which needs to change background-position to -38px
My-li-craft:
<template>
<li class="items__item" v-for="item in items" :key="item.id"
:style="{backgroundPosition: item.posX + 'px' + ' ' + item.posY + 'px' }"
>
</li>
</template>
<script>
export default {
name: "my-li-crafts",
props: {
items: {
type: Array,
required: true
}
},
data() {
return {
}
},
methods: {
bgPos: function () {
let el = this.$el.querySelector('.items__item'), bgWidth = 20, bgHeight = 20;
for (let i = 0; i< 3; i++) {
return el.css({
"background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px"
})
}
}
},
// computed: {
// bgPoss: function () {
// const el = this.$el.querySelector('.items__item'), bgWidth = 20, bgHeight = 20;
// return el.css({
// "background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px"
// })
//
// }
// }
}
</script>
<style scoped>
.items__item {
background-image: url("../../assets/icon_sprite.png");
width: 36px;
height: 36px;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
</style>