Блог

Главная - Вопросы по программированию - Vue.js метод, возвращающий устаревшие данные массива

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

#arrays #vue.js #vue-reactivity

#массивы #vue.js #vue-реактивность

Вопрос:

У меня есть метод 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 = [] .

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

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

Комментарии:

1. Я вижу три разных использования идентификатора data . Возможно, было бы легче понять ваши намерения, если бы вы заменили их уникальными именами. Например, строка this.$set(data, sessionDate, []) , по-видимому, не имеет никакого смысла, потому data что в этом случае она не реагирует. (Это локальная константа.)

2. Итак, что мне делать? Данные не реагируют, но то же самое происходит, если я использую Vue. свойство данных.

3. Извините, @e200, но я не могу достаточно четко следовать вашему коду, чтобы понять ваши намерения (и предложить помощь). Вот почему я предложил переписать его (совсем немного), чтобы его было легче понять.

4. Я улучшу его и вопрос.

5. На словах, какова ваша цель функции resolveMovieSessions, например? — Я немного понимаю, каковы ваши намерения, но похоже, что вы пишете код со слишком большими накладными расходами, поэтому он кажется сложнее, чем должен быть 😁

Ответ №1:

Проблема заключалась в том, что 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
  }
}