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

Question

i need some help with vue.

1. Is it possible to call data variables in options properties? For example in "price" property I would like to call data variable "tax".
2. 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>

Answer 1

Please see answers below

1. 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: '',
      }]
    }
  }
})

2. 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;
}

Answer 2

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>