I have a code snippet that retrieves data from an external server, which is triggered when the component is mounted
var get_one = 'https://api.example.com/rb.php';
axios.get(get_one)
.then(response => {
// console.log(response.data);
var data = response.data;
this.roomsData = data;
this.room_name = response.data.room_name;
this.roomsData.room_photos = response.data.room_photos;
})
.catch(e => {
this.errors.push(e)
});
Upon refreshing the page, {{roomsData.room_photos}} displays the following content
[ { "url": "/var/www/html/uploads/609cd3aaaaefd.jpg" }, { "url": "/var/www/html/uploads/609cd3aaa9dc2.jpg" }, ... This is my computed function:
computed: {
image_viewer_data: function () {
let vd = this.roomsData.room_photos
console.log('inside computed',vd)
let modifiedArr = vd.map(function(item){
let url_parts = item.url.split('/')
return 'https://api.example.com/uploads' + '/' + url_parts[url_parts.length - 1]
});
return modifiedArr;
}
},
When I output {{image_viewer_data}}, it appears in the format shown below:
[ "https://api.example.com/uploads/609cd3aaaaefd.jpg", "https://api.example.com/uploads/609cd3aaa9dc2.jpg", ... This is how I am utilizing this computed function:
<div class="carousel-item" v-for="(value,index) in image_viewer_data" >
<img class="d-block w-100" :src="value" :id="index" >
</div>
However, upon page refresh, I encounter the following errors:
[Vue warn]: Error in render: "TypeError: vd.map is not a function
and
TypeError: vd.map is not a function
It perplexes me as to why the code works intermittently and also fails at the same time.