Как мне получить доступ к этому маршруту. $ Из vue-apollo?

Я создаю запрос GraphQL, используя vue-apollo и graphql-tag.

Если я жестко закодирую нужный мне идентификатор, он будет работать, но я бы хотел передать текущий идентификатор маршрута в Vue Apollo в качестве переменной.

Работает (жестко заданный идентификатор):

  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
      variables: {
        id: 'my-long-id-example'
      }
    }
  }

Однако я не могу этого сделать:

Не работает (пытается получить доступ к this. $ route для идентификатора):

  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
      variables: {
        id: this.$route.params.id
      }
    }
  }

Я получаю сообщение об ошибке:

Uncaught TypeError: невозможно прочитать параметры свойства undefined

Есть какой-либо способ сделать это?

РЕДАКТИРОВАТЬ: полный блок сценария, чтобы было легче понять, что происходит:

<script>
import gql from 'graphql-tag'

const PropertyQuery = gql`
  query Property($id: ID!) {
    Property(id: $id) {
      id
      slug
      title
      description
      price
      area
      available
      image
      createdAt
      user {
        id
        firstName
        lastName
      }
    }
  }
`

export default {
  name: 'Property',
  data () {
    return {
      title: 'Property',
      property: {}
    }
  },
  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
      variables: {
        id: this.$route.params.id // Error here!
      }
    }
  }
}
</script>

javascript vue.js graphql vue-apollo
person Michael Giovanni Pumo    schedule 14.07.2017    source источник
comment
@VamsiKrishna Спасибо за ответ. Это объект, который находится в экспорте по умолчанию. Я обновил свой вопрос, чтобы показать это в контексте.   -  person Michael Giovanni Pumo    schedule 14.07.2017

Ответы (3)


arrow_upward
7
arrow_downward

Прочтите документацию (см. Раздел «Реактивные параметры») vue-apollo, вы можете использовать vue. реактивные свойства с помощью this.propertyName. Так что просто инициализируйте параметры маршрута свойством данных, а затем используйте его в своем объекте apollo, подобном этому

export default {
  name: 'Property',
  data () {
    return {
      title: 'Property',
      property: {},
      routeParam: this.$route.params.id
    }
  },
  apollo: {
    Property: {
      query: PropertyQuery,
      loadingKey: 'loading',
         // Reactive parameters
      variables() {
        return{
            id: this.routeParam
        }
      }
    }
  }
}
person Vamsi Krishna    schedule 14.07.2017
comment
Да, это сработало! Спасибо. Таким образом, переменные становятся функцией, которая возвращает объект, а не непосредственно самим объектом. Спасибо! - person Michael Giovanni Pumo; 14.07.2017
comment
@MichaelGiovanniPumo рад помочь, и, честно говоря, я прочитал документы и узнал что-то новое, так что спасибо вам тоже :) - person Vamsi Krishna; 14.07.2017

arrow_upward
10
arrow_downward

У вас не может быть доступа к "этому" объекту в таком виде:

variables: {
  id: this.$route.params.id // Error here! 
}

Но вам может понравиться это:

variables () {   
    return {
         id: this.$route.params.id // Works here!  
    }
}
person Jonas    schedule 10.09.2019

arrow_upward
4
arrow_downward

Хотя принятый ответ верен для примера с плакатом, он сложнее, чем необходимо, если вы используете простые запросы.

В этом случае this не является экземпляром компонента, поэтому вы не можете получить доступ к this.$route

apollo: {
  Property: gql`{object(id: ${this.$route.params.id}){prop1, prop2}}`
}

Однако вы можете просто заменить его функцией, и она будет работать так, как вы могли ожидать.

apollo: {
  Property () {
    return gql`{object(id: ${this.$route.params.id}){prop1, prop2}}`
  }
}

Нет необходимости устанавливать дополнительный реквизит.

person brainbag    schedule 07.05.2018