我正在使用vue-media-upload庫(此處提供文檔)
我渲染上傳器組件,并用圖像數組對其進行預處理:
<Uploader
:media="images"
/>
export default {
props:{
},
mounted(){
this.getData()
},
data(){
return{
images: [
],
}
},
methods:{
getData(){
axios.get('sections/slides/1').then(response => {
this.images = response.data;
})
},
}
正如您在代碼中看到的那樣,onMounted I調用getData函數,該函數從后端獲取圖像并更新圖像陣列。但由于某種原因,上傳程序組件無法使用來自服務器的圖像進行填充。
請注意,如果我試圖像這樣顯示服務器上的圖像{{images}},我可以看到圖像object..but,上傳組件無法填充圖像。
如果我像這樣對數據對象中的圖像進行硬編碼:
images: [
{ id: 1, name: '123_image.jpg' },
{ id: 2, name: '456_image.jpg' },
],
上傳器確實被填充了,但我不想硬編碼圖像,我想從服務器上獲取它們。
模板代碼是同步執行的,而數據獲取是異步的,這意味著Uploader組件總是用一個空的
images
數組創建的。使用條件渲染,您可以添加一個
v-if
來等待渲染/創建Uploader組件,直到填充images
數組。