Я получаю ошибку когда хочу вывести список фотографий из api
Invalid prop: type check failed for prop "photo". Expected Object, got String with value "5bace356e5e5d387633311.png".
структура json такая
{
"totalItems": 588,
"itemsPerPage": 15,
"countOfPages": 40,
"data": [
{
"id": 79,
"name": "New image",
"description": "fresh, new image",
"new": true,
"popular": false,
"image": {
"id": 224,
"contentUrl": "5bace356e5e5d387633311.png"
}
},
{
"id": 81,
"name": "rrfwrewqerrew",
"description": "rwrerwrwwr",
"new": true,
"popular": false,
"image": {
"id": 226,
"contentUrl": "5bacee15e9f17619014749.png"
}
},
и еще там фотки
]
}
вывожу я фотки с помощью devextreme popup
<template>
<div>
<div class="flex">
<div class="container-block" id="container">
<ul class="block">
<imageItem
v-for="( photo, index ) in $store.state.photo "
:key=" photo.id "
:index=" index "
:photo=" photo "
:show-info=" showInfo "
class=" img "
/>
</ul>
<DxPopup
:visible.sync=" popupVisible "
:drag-enabled=" false "
:close-on-outside-click=" true "
:width=" 730 "
:height=" 685 "
class=" popup "
>
<img :src=" currentPhoto " alt="">
</DxPopup>
</div>
</div>
</div>
</template>
<script>
import { DxPopup } from 'devextreme-vue/popup';
import imageItem from './imageItem'
export default {
data() {
return {
currentPhoto: {},
popupVisible: false
}
},
methods: {
showInfo( photo ) {
this.currentPhoto = photo;
this.popupVisible = true;
},
},
components: { DxPopup, imageItem },
}
</script>
его ребенок
<template>
<li>
<DxButton
:on-click=" showImageInfo "
class=" button-info img "
:style="{ 'background': 'url(' + photo + ')' }"
/>
</li>
</template>
<script>
import { DxButton } from 'devextreme-vue/button';
export default {
components: { DxButton },
props: {
photo: {
type: Object,
required: true,
default: () => ( {} )
},
showInfo: {
type: Function,
required: true,
default: () => {}
}
},
methods: {
showImageInfo() {
this.showInfo( this.photo );
}
}
}
</script>
и само хранилище Vuex
export default new Vuex.Store( {
state: {
photo: [],
perPage: 15,
page: 1,
total: 0,
loading: false,
},
getters: {
numPages: state => Math.ceil( state.total / state.perPage ),
},
mutations: {
updateLoading: ( state, loading ) => state.loading = loading,
updatePosts: ( state, { photo, total, page } ) => Object.assign( state, { photo, total, page } ),
},
actions: {
async fetchPosts( { commit }, page ) {
commit('updateLoading', true)
// const start = ( page - 1 ) * state.perPage;
// const end = page * state.perPage;
const url = `/api/photos?limit=15`
const photo = []
try {
const response = await fetch( url )
const res = await response.json()
for( let i = 0; i < res.data.length; i++ ) {
photo.push( res.data[i].image.contentUrl )
}
const total = res.totalItems
commit( 'updatePosts', { photo, total, page })
} catch (e) {
console.error(e)
}
commit( 'updateLoading', false )
},
}
} )
за рание спасибо ; )
