admin管理员组

文章数量:1425787

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

 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 ponent code

This is how i use the methods inside the parent and how my ponents 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',
  ponents: { exchange, pair, trades },
  data(){
    return{
      selectedExchange: ''
    }
   },
   methods: {
     updateExchange(updatedExchange){
       this.selectedExchange = updatedExchange
     }
   },
  };

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

 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 ponent code

This is how i use the methods inside the parent and how my ponents 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',
  ponents: { exchange, pair, trades },
  data(){
    return{
      selectedExchange: ''
    }
   },
   methods: {
     updateExchange(updatedExchange){
       this.selectedExchange = updatedExchange
     }
   },
  };

• javascript
• vue.js
• ccxt

Share Improve this question Follow edited Dec 11, 2019 at 10:19 gosuto 5,78166 gold badges4141 silver badges5959 bronze badges asked Sep 3, 2018 at 16:21 RaduRadu 54011 gold badge77 silver badges2323 bronze badges 5

• 1 have you tried to add type: String to your prop definition? – Fab Commented Sep 3, 2018 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 Commented Sep 3, 2018 at 16:32
• Try logging this.selectedExchange inside your getMarkets() method to see if it contains what you expect. – connexo Commented Sep 3, 2018 at 16:41
• 1 Already did that, same code, just added console.log(this.selectedExchange) I get [__ob__: Observer] which i did some reasearch on and this is mon for props from what i've seen, but i expected to get the default value – Radu Commented Sep 3, 2018 at 16:43
• 1 could you please post the parent ponent template? I think you get default value only if the ponent doesn't have that specific prop in its attributes – Fab Commented Sep 3, 2018 at 17:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 ponent.

This should work:

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

本文标签： javascriptVue prop default value not working properlyStack Overflow