Как арифметически комбинировать реквизиты в Vue.js?

Question

У меня есть таблица, которая выглядит следующим образом:

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

Я пытаюсь сделать значение упора последнего столбца таблицы равным окончательной цене, которая является исходной ценой за вычетом цены скидки,Однако, когда я ставлю опору таким образом, она не работает:

<el-table-column
  v-if="promoActive"
  prop="(original_price - discount_value)"
  label="Final Price"
  width="180">
</el-table-column>

Какой лучший способ сделать это?

Answer 1

Прежде всего, причина, по которой ваш prop="(original_price - discount_value)" не работал, заключается в том, что атрибут prop оценивается как текст, если вы не используете синтаксис v-bind.Так что это должно работать:

v-bind:prop="(original_price - discount_value)"

Однако для этого можно использовать вычисленные свойства в VueJS, чтобы абстрагировать всю эту логику вычислений от шаблона: вы можете выполнять вычислениятам, и просто используйте директиву v-bind , чтобы связать вычисленное значение с элементом.Назовем ваше вычисляемое свойство finalPrice.В своем коде приложения / компонента VueJS вы можете сделать следующее:

computed: {
    finalPrice() {
        return this.original_price - this.discount_value;
    }
}

Затем обновите разметку, чтобы использовать v-bind:prop="finalPrice":

<el-table-column
  v-if="promoActive"
  v-bind:prop="finalPrice"
  label="Final Price"
  width="180">
</el-table-column>

p / s: если вы предпочитаетеиспользуйте сокращения, не беспокойтесь: :prop="finalPrice" (обратите внимание на префикс :) синтаксически идентичен v-bind:prop="finalPrice".

---

Не рекомендуется, но все же выполнимо: если вы хотите передать аргументы для выполнениявместо расчетов вместо этого вы можете использовать метод:

method: {
    calculateFinalPrice(original, discount) {
        return original- discount;
    }
}

И ваша разметка будет:

<el-table-column
  v-if="promoActive"
  v-bind:prop="calculateFinalPrice(original_price, discount_value)"
  label="Final Price"
  width="180">
</el-table-column>

Answer 2

Рассматривали ли вы вычисленные свойства в Vue JS?обратитесь: [https://vuejs.org/v2/guide/computed.html#Computed-Properties]

эти свойства являются производными от данных и изменяются при изменении исходных данных.Это может быть рекомендуемый подход.

пример:

computed:{
       finalPrize : function () {
                       return this.original_price - this.discount_value;
                     }
       }

Answer 3

Вы можете использовать вычисляемое свойство как

    computed:{
       calculate(){
       return this.prop1 - this.prop2;
    }
 }

И затем называется опора

Answer 4

Вы можете использовать вычисляемое свойство для этого типа арифметических вычислений.где вы можете определить функцию и иметь полный контроль над всеми свойствами компонента.перейдите по этой ссылке .Вы поймете, как это сделать.