Question

我有一个方法resolveMovieSessions，它从API接收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 data = []的初始值。

但是在方法内部，如果我放置了console.log(data)，则得到的是新集合，但没有反应。

怎么回事？

Answer 1

问题是data常量实际上是数组而不是对象：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
  }
}

Vue.js方法返回过时的数组数据

1 个答案: