I'm trying to utilize the Moment javascript library to format a date that I retrieve through Apollo-GraphQL. My setup involves VueJS Apollo on the client side for executing graphQL queries like this:
import { ALL_EVENTS } from '../constants/graphql.js'
import Event from './Event'
import moment from 'moment'
export default {
name: 'EventList',
data: () => ({
events: [],
loading: 0
}),
apollo: {
events: ALL_EVENTS
},
components: {
Event
},
The response from apollo middleware provides an array of objects with properties such as id, name, startDate (in UTC format), and endDate (also in UTC format).
When attempting to create a computed property in VueJS using the list of objects from Apollo, I encounter a read-only error even though it appears that I am creating a new object:
computed: {
eventsFormatted: function () {
var out = this.events
for (var i in out) {
out[i].startDate = moment(out[i].startDate)
out[i].endDate = moment(out[i].endDate)
}
return out
}
}
What steps should I take to generate a copy of the array that is editable?