Метод Vue.js, возвращающий устаревшие данные массива - PullRequest
Новая
       20

Метод Vue.js, возвращающий устаревшие данные массива

0 голосов
/ 11 апреля 2019

У меня есть метод resolveMovieSessions, который получает movieSessions от API и создает новую коллекцию данных на основе результата API.

Чего я хочу добиться - это преобразовать данные API из этого: 

{
  "data": {
    "movieSessions": [
      {
        "startsIn": "2019-04-12 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 1"
        }
      },
      {
        "startsIn": "2019-04-13 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 1"{
}
        }
      },
      {
        "startsIn": "2019-04-14 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 1"
        }
      },
      {
        "startsIn": "2019-04-15 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 1"
        }
      },
      {
        "startsIn": "2019-04-16 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 1"
        }
      },
      {
        "startsIn": "2019-04-17 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 1"
        }
      },
      {
        "startsIn": "2019-04-11 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 2"
        }
      },
      {
        "startsIn": "2019-04-12 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 2"
        }
      },
      {
        "startsIn": "2019-04-13 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 2"
        }
      },
      {
        "startsIn": "2019-04-14 10:30:00",
        "movieTheaterRoom": {{
}
          "name": "Sala 2"
        }
      },
      {
        "startsIn": "2019-04-15 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 2"
        }
      },
      {
        "startsIn": "2019-04-16 10:30:00",
        "movieTheaterRoom": {
          "name": "Sala 2"
        }
      }
    ]
  }
}

до этого: 

{
  "2019-04-12": [{
    "room": "Sala 1",
    "hour": "10:30:00"
  }, {
    "room": "Sala 2",
    "hour": "10:30:00"
  }],
  "2019-04-13": [{
    "room": "Sala 1",
    "hour": "10:30:00"
  }, {
    "room": "Sala 2",
    "hour": "10:30:00"
  }],
  "2019-04-14": [{
    "room": "Sala 1",
    "hour": "10:30:00"
  }, {
    "room": "Sala 2",
    "hour": "10:30:00"
  }],
  "2019-04-15": [{
    "room": "Sala 1",
    "hour": "10:30:00"
  }, {
    "room": "Sala 2",
    "hour": "10:30:00"
  }],
  "2019-04-16": [{
    "room": "Sala 1",
    "hour": "10:30:00"
  }, {
    "room": "Sala 2",
    "hour": "10:30:00"
  }],
  "2019-04-17": [{
    "room": "Sala 1",
    "hour": "10:30:00"
  }],
  "2019-04-11": [{
    "room": "Sala 2",
    "hour": "10:30:00"
  }]
}

Для этого я сделал следующий код: 

export default {
  data() {
    return {
      movieSessions: null
    }
  },
  methods: {
    resolveMovieSessions(movieSessions) {
      const data = []

      if (movieSessions) {
        movieSessions.forEach((session) => {
          const startsInParts = session.startsIn.split(' ')

          const sessionDate = startsInParts[0]
          const sessionTime = startsInParts[1]

          if (!data.hasOwnProperty(sessionDate)) {
            this.$set(data, sessionDate, [])
          }

          data[sessionDate].push({
            room: session.movieTheaterRoom.name,
            time: sessionTime
          })
        })
      }

      return data
    },
    async loadMovieSessions() {
      const movieSessionsQuery = await apollo.query({
        query: MOVIE_SESSIONS_QUERY,
        variables: {
          movieId: this.movie.id,
          movieTheaterId: this.movieTheaterId
        }
      })

      const { data } = movieSessionsQuery
      const { movieSessions } = data

      this.movieSessions = this.resolveMovieSessions(movieSessions)
    }
  }
}

Но когда вызывается this.resolveMovieSessions(movieSessions), результатэто начальное значение data const const data = [].

Но внутри метода, если я поставлю console.log(data), я получу новую коллекцию, но нереактивную.

Что происходит?

1 Ответ

0 голосов
/ 12 апреля 2019

Проблема состояла в том, что data const был фактически массивом вместо объекта: const data = [], я не знаю почему, но это было причиной проблемы.

Это рабочаякод: 

methods: {
  resolveMovieSessions(movieSessions) {
    const data = {}

    if (movieSessions) {
      movieSessions.forEach((session) => {
        const startsInParts = session.startsIn.split(' ')

        const sessionDate = startsInParts[0]
        const sessionHour = startsInParts[1]

        if (!data.hasOwnProperty(sessionDate)) {
          data[sessionDate] = []
        }

        data[sessionDate].push({
          room: session.movieTheaterRoom.name,
          hour: sessionHour
        })
      })
    }

    return data
  }
}
...