Vue prop default value not working properly

Question

Ok so I have the following prop that I get from the parent component

 props: {
  selectedExchange: {
    default: 'acx',
  }
},

And i try to use it in the following method

 methods: {
  getMarkets() {
    const ccxt = require('ccxt')
    const exchanges = ccxt.exchanges;
    let marketPair = new ccxt[this.selectedExchange]()
    let markets =  marketPair.load_markets()
    return markets
  }
},

The expected result should be an array of markets for my project but i get an error in the console

 [Vue warn]: Error in mounted hook: "TypeError: ccxt[this.selectedExchange] is not a constructor"

Now i thought it might be a problem with ccxt but it's not! I have tried the following code

methods: {
  getMarkets() {
    const ccxt = require('ccxt')
    const exchanges = ccxt.exchanges;
    let acx = 'acx'
    let marketPair = new ccxt[acx]()
    let markets =  marketPair.load_markets()
    return markets
  }
},

If you don't see the change I have made a variable that contains 'acx' inside, exactly the same like the prop but this time it's created inside the method, and with this code I get the expected result, It has been bugging me for days and I can't seem to find an answer to it, did I initialize the default value wrong? When i look inside vue dev tools the value for my prop is array[0], only after I pass a value to that prop it gets updated, shouldn't i see the default value of acx in devtools? Any help is much appreciated!

Edit 1: Added parent component code

This is how i use the methods inside the parent and how my components are related to each other,

<div id="exchange">
  <exchange v-on:returnExchange="updateExchange($event)"></exchange>
</div>
<div id="pair">
  <pair :selectedExchange="this.selectedExchange"></pair>
</div>

And this is the code inside the script tags, i didn't include the import tag cause i don't think it would be useful

export default {
  name: 'App',
  components: { exchange, pair, trades },
  data(){
    return{
      selectedExchange: ''
    }
   },
   methods: {
     updateExchange(updatedExchange){
       this.selectedExchange = updatedExchange
     }
   },
  };

have you tried to add `type: String` to your prop definition? — Fab, Sep 03 '18 at 16:30
Yep, I thought of that and when I did that i got an error that it expected string but got array — Radu, Sep 03 '18 at 16:32
Try logging `this.selectedExchange` inside your `getMarkets()` method to see if it contains what you expect. — connexo, Sep 03 '18 at 16:41
Already did that, same code, just added `console.log(this.selectedExchange)` I get `[__ob__: Observer]` which i did some reasearch on and this is common for props from what i've seen, but i expected to get the default value — Radu, Sep 03 '18 at 16:43
could you please post the parent component template? I think you get default value only if the component doesn't have that specific prop in its attributes — Fab, Sep 03 '18 at 17:18

Fab · Accepted Answer · 2018-09-03T17:46:10.727

4

In this case you will inherit the default value:

<pair></pair>

In this case you will always inherit the value of selectedExchange, even if it's null or undefined:

<pair :selectedExchange="this.selectedExchange"></pair>

So, in your case, you have to handle the default value on parent component.

This should work:

export default {
  name: 'App',
  components: { exchange, pair, trades },
  data(){
    return{
      selectedExchange: 'acx' // default value
    }
   },
   methods: {
     updateExchange(updatedExchange){
       this.selectedExchange = updatedExchange
     }
   },
  };

edited Sep 03 '18 at 17:46

answered Sep 03 '18 at 17:36

Fab

4,526
2
21
45

Ok so i do get what I want to do by handling the default value on the parent component but, that value changes however the user wants it to be changed, let me explain, the user selects an item from a list(acx being one of them) and based on what the user selects certain content will be shown in pair, i do get the content that needs to be shown when the user clicks on acx cause that's the default value but how do i make it change whenever that value updates? – Radu Sep 03 '18 at 17:39
1

@Radu Can't you simply initialize selectedExchange in your data with 'acx'? – Fab Sep 03 '18 at 17:42
I did that, as I said it works as intended for acx, but I need it to work so that when the user clicks another item it will update the data accordingly, what you said works and helped me, this is a different question cause i thought that by solving this it will work as i wanted to but looks like i need to do some more work – Radu Sep 03 '18 at 17:44
1

@radu just to be sure you understand me, I have edited my answer – Fab Sep 03 '18 at 17:46
I did understand you, that's exactly what I've done, i asked how can I make so that when the user changes selectedExchange, the content that I display changes too, as I said u asked my main question – Radu Sep 03 '18 at 17:48
1

@Radu this should add a computed property (or a watcher for that prop) on child component, so every time the value changes you will get your list based on that value – Fab Sep 03 '18 at 17:51
Yep i forgot about computed properties, thank you so much for the help! – Radu Sep 03 '18 at 17:52

Vue prop default value not working properly

Edit 1: Added parent component code

1 Answers1