Изменение свойств, полученных с помощью Apollo GraphQL в vueJs - PullRequest
Новая
       14

Изменение свойств, полученных с помощью Apollo GraphQL в vueJs

0 голосов
/ 05 июля 2018

Я хочу отформатировать дату, полученную через Apollo-GraphQL, используя библиотеку javascript Moment. Я использую VueJS Apollo на стороне клиента для выполнения запросов graphQL как таковых: 

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
  },

Промежуточное ПО apollo возвращает список объектов, которые содержат идентификатор, имя, начальную дату (строка в формате UTC) и свойство endDate (также отформатированное в формате UTC), среди других свойств, добавленных apollo для его использования.

Всякий раз, когда я пытаюсь создать вычисляемое свойство в VueJS, используя список объектов из Apollo, он выдает ошибку только для чтения, но мне кажется, что я создаю новый объект: 

  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
    }
  }

Что мне нужно сделать, чтобы создать копию массива, который я могу изменить?

1 Ответ

0 голосов
/ 05 июля 2018

Когда вы делаете var out = this.events, out var теперь указывает на тот же массив объектов, что и this.events.

Так что, если this.events только для чтения, вам нужно будет сделать копию массива, а если каждый объект в массиве только для чтения, вам также потребуется сделать копию каждого объекта.

Вот пример использования оператора распространения для копирования массива и объектов: 

computed: {
  eventsFormatted() {
    let out = [...this.events];
    for (let i in out) {
      let item = {...out[i]};
      item.startDate = moment(item.startDate);
      item.endDate = moment(item.endDate);
      out[i] = item;
    }
    return out;
  }
}

Выше сделана поверхностная копия каждого объекта в массиве. Если вам нужно сделать глубокую копию из-за структуры this.events, см. Этот пост .

...