i need some help with vue.
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/vue@2.5.11"></script> <script src="https://unpkg.com/vue-select@2.3.1"></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>
First of all. Make data:{}
a function. ie 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/vue-select@2.3.1/dist/vue-select.js"></script> <script src="https://unpkg.com/vue@2.5.11/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>
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.