我有一个从 APIresolveMovieSessions
接收movieSessions
并根据 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)
那么我会得到一个新的集合,但是一个非反应性的集合。
怎么了?