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

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 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 方法返回过时的数组数据

Vue.js method returning outdated array data

arrays

vue.js

vue-reactivity