Question

我有一个包含这样的项目的列表

Math.ceil(number / 10);

这些项目是动态添加的，我的问题是，是否有可能将数量和价格相加以得出金额值，以使金额值也会随着价格或数量而变化？

Answer 1

也许你需要一个金额的getter函数：

a = ({
  quantity: '',
  price: '',
  get amount() {
    return +this.quantity + +this.price;
  }
})

然后您可以访问a.amount获取数量和价格的总和。

Answer 2

虽然我觉得这个操作应该是＆＃39;乘法＆＃39;而不是添加＆＃39;。请尝试以下方法：

＆＃13;

var array = [{ quantity: 10, price: 200, amount: '' },{ quantity: 5, price: 100, amount: '' }]
var newArray = array.map(function(elem, index){
	array[index].amount = array[index].quantity + array[index].price
	return;
});
	
console.log(array);

＆＃13;

Answer 3

由于您使用的是vuejs，因此您可以使用[computed][1]属性轻松实现目标。

示例：

export default {
  data () {
    return {
      quantity: '',
      price: ''
    }
  },
  computed: {
    amount () {
      return this.quantity + this.price
    }
  }
}

请注意，computed属性不能设置为this.computedProp = someValue且不是functions，它们可以像data属性一样使用。

Answer 4

您可以创建与列表中的项目相关的新组件

var vm = new Vue({
      el: '#example',
      data: {
        quantity: '', 
        price: ''
      },
      computed: {
        amount: function(){
          return this.quantity * this.price
        }
        
      }
    })

然后根据数量和价格创建计算属性。

Answer 5

有几个普通javascript 选项。我没有提到任何特定的Vue。

对我来说，最简单的方法是向对象添加getAmount - 方法，这将根据您的其他两个属性返回金额。
例如

var item = {
  quantity: 3,
  price: 5.00,
  getAmount: function () {
    return this.quantity * this.price
  }
}

虽然我以null作为默认值第二种选择是使用对象描述符。您可以使用Object.create()创建对象，也可以使用Object.defineProperty()向已存在的对象添加属性。这两种方法都允许您传递对象描述符，您可以在其中为您的属性定义getter，这将根据您的其他字段计算您想要的值。
的 e.g。

var item = Object.create({ quantity: null, price: null, }, { amount: { get: function () { return this.quantity*this.price } } })

现在，amount属性将返回quantity * price，只需执行item.amount即可。

Answer 6

要根据数量计算价格，只需使用{{ item.price * item.quantity }}即可。我假设您不想使用不需要的总字段来混乱您的数据库:-)

示例（包括总价）

＆＃13;

new Vue({
    el:'#app',
    data: {
        list: [
            { name: 'foo', quantity: 2, price: 20 },
            { name: 'bar', quantity: 3, price: 150 },
            { name: 'baz', quantity: 1, price: 80 }
        ]
    },
    computed: {
        total(){ return this.list.reduce( (total, item) => item.price * item.quantity + total  ,0);},
    }
})

＆＃13;

ul {list-style:none;}
li:last-child { border-top:1px solid;border-bottom:3px double;}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>



<div id="app">
   <ul>
        <li v-for="item in list">
            {{ item.name}}: {{ item.price * item.quantity}}
        </li>
        <li>Total: {{ total }}</li>
    </ul>
</div>

＆＃13;

求和列表中项目的两个属性（javascript）

6 个答案: