Используйте результат запроса vue-apollo в методах vue - PullRequest
Новая
       16

Используйте результат запроса vue-apollo в методах vue

0 голосов
/ 21 июня 2019

Я объявляю запрос apollo для компонента ниже.

У меня проблема в том, что переменная компонентов содержит данные в шаблоне, но не содержит данных в методах mounted или getComponents.

В настоящее время я могу видеть данные в консоли только после второго щелчка. Как получить данные по первому щелчку кнопки? 

<template>
  <button class="rd-body-box" @click="getComponents">
    Get Components
  </button>
  {{ components }}
</template>

export default {
  data: {
    return {
      components: {}
    }
  },
  apollo: {
    components: {
      query: gql`
        {
          components {
            id
            created_at
            created_by_id
            updated_at
            modified_by_id
            is_master
            name
            alias
          }
        }
      `,
      update: function(data) {
        let componentByIds = {};
        _.forEach(data.components || [], function(component) {
          let item = {
            id: component.id,
            createdAt: component.created_at,
            createdById: component.created_by_id,
            updatedAt: component.updated_at,
            modifiedById: component.modified_by_id,
            isMaster: component.is_master,
            name: component.name,
            alias: component.alias
          };
          componentByIds[item.id] = item;
        });
        return componentByIds;
      }
    }
  },
  mounted() {
    console.log(this.components); //empty object
  },
  methods: {
    getComponents() {
      console.log(this.components); //first click => empty object, second click gets the data
    }
  }
}
...