How to combine props arithmetically in Vue.js? - vue.js

Question

I have a table that looks like this:
<el-table
:data="info"
class="myform"
stripe
style="width: 100%">
<el-table-column
prop="location_name"
label="Name"
width="180">
</el-table-column>
<el-table-column
v-if="promoActive"
prop="original_price"
label="Original Price"
width="180">
</el-table-column>
<el-table-column
prop="spaces_available"
label="Spaces"
width="180">
</el-table-column>
<el-table-column
v-if="promoActive"
prop="discount_value"
label="Discount Value"
width="180">
</el-table-column>
</el-table-column>
<el-table-column
v-if="promoActive"
label="Final Price"
width="180">
</el-table-column>
</el-table>
I'm trying to make the prop value of the last table column equal to the the final price which is the original price minus the discount price. However, when I put the prop like this, it doesn't work:
<el-table-column
v-if="promoActive"
prop="(original_price - discount_value)"
label="Final Price"
width="180">
</el-table-column>
What's the best way to go about this?

Answer 1

you can use computed property like
computed:{
calculate(){
return this.prop1 - this.prop2;
}
}
And then called the prop

Answer 2

Have you considered computed properties in Vue JS ?
refer : [https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties]
these properties are derived from the data and change whenever the source data is modified. This could be the recommended approach.
example :
computed:{
finalPrize : function () {
return this.original_price - this.discount_value;
}
}

Answer 3

First and foremost, the reason why your prop="(original_price - discount_value)" did not work is because prop attribute is evaluated as text unless you use the v-bind syntax. So this should work:
v-bind:prop="(original_price - discount_value)"
However, this is what computed properties in VueJS can be used for, to abstract all these calculation logic away from your template: you can perform the calculations in there, and simply use the v-bind directive to bind the computed value to the element. Let's name your computed property finalPrice. In your VueJS app/component code, you can do this:
computed: {
finalPrice() {
return this.original_price - this.discount_value;
}
}
Then, update your markup to use v-bind:prop="finalPrice":
<el-table-column
v-if="promoActive"
v-bind:prop="finalPrice"
label="Final Price"
width="180">
</el-table-column>
p/s: If you prefer to use shorthands, fret not: :prop="finalPrice" (note the : prefix) is syntactically identical to v-bind:prop="finalPrice".
Not recommended, but still workable: if you want to pass the arguments to perform calculations instead, you can use a method instead:
method: {
calculateFinalPrice(original, discount) {
return original- discount;
}
}
And your markup will be:
<el-table-column
v-if="promoActive"
v-bind:prop="calculateFinalPrice(original_price, discount_value)"
label="Final Price"
width="180">
</el-table-column>

Answer 4

You can use computed property for this type of arithmetic calculations. where you can define a function and have full control over all properties of component.
follow this link. you will get idea how you can do it.