Reputation: 7311
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