Всем доброго времени суток)
Vue 3
В products-carousel передаю newProducts - массив(полученный через fetch запрос) содержащий 8 объектов. Если передать этот массив дальше в new-product, то все работает. Но реализуя кнопки т.к. не могу мутировать массив из props, я пытался в data() создать переменную productsList присвоив значение массива newProducts. Но во Vue devtools он показывает что в productsList пустой массив.
<div class="products-carousel">
<button @click="spinCarousel('left')" class="button products-left">
<svg
height="32px"
id="Layer_1"
style="enable-background: new 0 0 128 128"
version="1.1"
viewBox="0 0 128 128"
width="32px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g>
<line
style="
fill: none;
stroke: #2f3435;
stroke-width: 12;
stroke-linecap: square;
stroke-miterlimit: 10;
"
x1="87.5"
x2="40.5"
y1="111"
y2="64"
/>
<line
style="
fill: none;
stroke: #2f3435;
stroke-width: 12;
stroke-linecap: square;
stroke-miterlimit: 10;
"
x1="40.5"
x2="87.5"
y1="64"
y2="17"
/>
</g>
</svg>
</button>
<new-product
v-for="(newProduct, idx) in productsList"
:key="idx"
:newProduct="newProduct"
/>
<button @click="spinCarousel('right')" class="button products-right">
<svg
height="32px"
id="Layer_1"
style="enable-background: new 0 0 128 128"
version="1.1"
viewBox="0 0 128 128"
width="32px"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g>
<line
style="
fill: none;
stroke: #2f3435;
stroke-width: 12;
stroke-linecap: square;
stroke-miterlimit: 10;
"
x1="40.5"
x2="87.5"
y1="17"
y2="64"
/>
<line
style="
fill: none;
stroke: #2f3435;
stroke-width: 12;
stroke-linecap: square;
stroke-miterlimit: 10;
"
x1="87.5"
x2="40.5"
y1="64"
y2="111"
/>
</g>
</svg>
</button>
</div>
</template>
<script>
import NewProduct from '@/components/NewProduct'
export default {
name: 'ProductsCarousel',
components: {
NewProduct,
},
props: {
newProducts: {
type: Array,
default: () => [],
},
},
data() {
return {
productsList: this.newProducts,
}
},
methods: {
spinCarousel(direction) {
if (direction === 'right') {
this.productsList.push(this.productsList.shift())
}
if (direction === 'left') {
this.productsList.unshift(this.productsList.pop())
}
},
},
}
</script>
productsList: [ ...this.newProducts ],
(чтобы не получать потом неожиданные приколы). Но в целом должно и так работать. Вы уверены, что всё как надо в компонент передаётся (выше)?newProducts
передаю в компонентnew-product
минуяproductsList
то все ок. Не значит ли это что все нормально сprops
в компоненте из кода? Плюс во Vue devtools видно что вprops
как раз лежитnewProducts
содержащий массив с 8 объектами, но видно также что вdata()
есть пустой массивproductsList