bbozo
bbozo

Reputation: 7311

How to define a subscription based on route params?

I'm using RxJS using vue-rx and I have a route that needs to fetch a slightly different AJAX API request depending on the params.

I've been playing with all kinds of different approaches, but this is the one that +should have+ worked.

import Vue from 'vue'
import numeral from 'numeral'
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/interval'
import 'rxjs/add/operator/switchMap'
import 'rxjs/add/operator/map'
import axiosObservable from '../lib/axiosObservable'

export default {
  name: 'Exchange',
  props: ['exchange_name'],

  methods: {
    exchangeFetch (exchangeName) {
      return Observable
        .interval(3000)
        .switchMap(axiosObservable.get(Vue.config.infoCoinUrl + '/exchanges/' + exchangeName + '/market-pairs'))
        .map((response) => response.data)
    }
  },

  mounted () {
    alert(exchangeName)
    this.$subscribeTo(
      this.exchangeFetch(this.exchange_name),
      (data) => {
        this.market_pairs = data
      })
  },
  data () {
    return {
      market_pairs: []
    }
  },

But what happens is that the alert gets executed only once during browsing (and the wrong AJAX call gets ran every time).

I'm a bit noobish in all of this (Vue & JS), I'm suspecting this might be a bug in the vue-rx framework - or at least a surprising behavior (for noobie me).

The thing that I love about vue-rx is how it integrates into vue.js lifecycles and removes the danger of leaking observables (which coupled with an AJAX call accounts to a ddos attack).

I'm looking for a solution that uses vue-rx API , or at least doesn't require me to stop the observables "manually".


UPDATE 1 seems like the issue has nothing to do with vue-rx, it's the mounted block that doesn't get executed on props change....

The exchanges are loaded like this and it generally works, there should be nothing wrong with this...

<router-link v-for="exchange in exchanges" v-bind:key="exchange.name" class="navbar-item" :to="{ name: 'exchange-show', params: { exchange_name: exchange.name }}">{{ exchange.name }}</router-link>

Upvotes: 1

Views: 341

Answers (0)

Related Questions