Retrieve data variables in options properties in Vue.js / Vue-select

Question

i need some help with vue.

Is it possible to call data variables in options properties? For example in "price" property I would like to call data variable "tax".
And how to return a single options property in a function, in my case function is called "final", i tried return this.selected.test, but it is not working

Here is the code:

Vue.component('v-select', VueSelect.VueSelect)
new Vue({
  el: '#app',
  data: {
    selected: null,
    tax: 0.07,
    mrg: 0.11,
    ex_mrg: 0.16,
    qnt: '',
    options: [{
      label: 'Item 1',
      id: 1,
      price: '* Price: ' + '$' + 0.26 + ' per one printed item',
      test: 5,
      env: 0.026,
      ltrhd: '',
    }, {
      test: 6,
      label: 'Item 2',
      id: 2,
      price: '* Price: ' + '$' + 7.35 + ' per one printed item',
      shrt: 7.351
    }, {
      test: 7 * 7,
      label: 'Item 3',
      id: 3,
      price: '* Price: ' + '$' + 0.96 + ' per one printed item',
      frsb: 0.969269,
      yoyo: 0.3658
    }, ]
  },
  computed: {
    selectedId() {
      return this.selected ? this.selected.id : null;
    },
    priceId() {
      return this.selected ? this.selected.price : null;
    },
    result: function() {
      return this.tax * this.mrg * this.qnt;
    },
    final: function() {
      return this.selected;
    }
  },
})

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <h1>Please, select item</h1>
  <v-select v-model="selected" :options="options"></v-select><br>
  <p>Quantity needed:</p>
  <input type="number" name="trade-in" v-model.number="qnt" />
  <p>{{ priceId }}</p>
  <h1>selectedId: {{ selectedId }}</h1>
  <p>{{ qnt }}</p>
  <p>Final price: ${{ result }}</p>
  <p>Final price: {{ final }}</p>
</div>

Sorry for that. I would like to display the property "test" everytime when i select an item. Even better would be to merge/calculate "test" variable with data variable "tax" for example, so i get displayes the final result — unforgiven
– unforgiven, Commented Dec 15, 2017 at 16:58
You can check the demo now. And let me know if that is what you meant — samayo
– samayo, Commented Dec 15, 2017 at 17:14

samayo · Accepted Answer · 2017-12-15 17:13:30Z

First of all. Make data:{} a function. i.e it should be data () {}

second the reason you are not getting this.selected.test is because, initially your this.selected is null. So, once the page loads your computed property tries to fetch test from this null data.

third. If you want use the tax property inside your options, you should consider making a property options that returns the options plus the tax all computed.

Here is a working example.

Vue.component('v-select', VueSelect.VueSelect);

new Vue({
  el: '#app',
  data () {
    return {
      selected: null,
      tax: 0.07,
      mrg: 0.11,
      ex_mrg: 0.16,
      qnt: '',
    }
  },
computed: {
  options () {
    return   [{
      label: 'Item 1',
      id: 1,
      price: this.tax + '$' + 0.26 + ' per one printed item',
      test: 5,
      env: 0.026,
      ltrhd: '',
    }, {
      test: 6,
      label: 'Item 2',
      id: 2,
      price:  this.tax  + '$' + 7.35 + ' per one printed item',
      shrt: 7.351
    }, {
      test: 7*7,
      label: 'Item 3',
      id: 3,
      price: this.tax  + '$' + 0.96 + ' per one printed item',
      frsb : 0.969269,
      yoyo : 0.3658
    }]
  },
      selectedId() {
    return this.selected ? this.selected.id : null;
    },
    priceId() {
    return this.selected ? this.selected.price : null;
      
    },
    result: function(){
    return this.tax * this.mrg * this.qnt;
    },
  final () {
    return this.selected ? this.selected.test : false;
  }
}

})

<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id='app'>
  <h1>Please, select item</h1>
  <v-select v-model="selected" :options="options"></v-select><br>
  <p>Quantity needed:</p>
  <input type="number" name="trade-in" v-model.number="qnt" />
  <p>{{ priceId }}</p>
  <h1>selectedId: {{ selectedId }}</h1>
  <p>{{ qnt }}</p>
  <p>Final price: ${{ result }}</p>
  <p>Final price: {{ final }}</p>
</div>

Vipin Kumar · Accepted Answer · 2017-12-15 17:20:12Z

1

Please see answers below

Is it possible to call data variables in options properties? For example in "price" property I would like to call data variable "tax".

You cannot, but you can do following. Make your data a function and declare a tax variable, that variable you can use at multiple places.

new Vue({
  el: '#app',
  data: function() { 
    var tax = 0.07;
    return {
      tax: tax,,
      options: [{
        label: 'Item 1',
        id: 1,
        price: '* Price: ' + '$' + (0.26 + tax) + ' per one printed item',
        test: 5,
        env: 0.026,
        ltrhd: '',
      }]
    }
  }
})

And how to return a single options property in a function, in my case function is called "final", i tried return this.selected.test, but it is not working

Initially your this.selected is null. That is why you code is throwing exception when you did this.selected.test. Try following

final: function(){
      return this.selected && this.selected.test;
}

edited Dec 15, 2017 at 17:20

answered Dec 15, 2017 at 17:10

Vipin Kumar

6,5661 gold badge21 silver badges25 bronze badges

2 Comments

unforgiven Over a year ago

Great! that was the thing that I was looking for! Thank you. One more question, do you maybe know how to add line break in the "price" property? i already tried \n or

Vipin Kumar Over a year ago

For that you have to use  instead of {{ priceId }}. Please upvote or mark accepted if this is what you need.

Collectives™ on Stack Overflow

Retrieve data variables in options properties in Vue.js / Vue-select

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related