合計二つの性質（ジャバスクリプト）

Question

私はこの

{ quantity: '', price: '', amount: '' } 

これらの項目は、私の質問があり、それが来て数量と価格を合計することが可能である動的に追加されているなどのアイテムを持っているリストを持っています金額の価値が価格や数量に関しても変化するような金額で表示されますか？

Answer 1

多分あなたは量のためにゲッター機能を必要とする：

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

、あなたは数量と価格の合計のためのa.amountにアクセスすることができます。

Answer 2

vuejsを使用しているので、[computed][1]プロパティを使用すると簡単に目的を達成できます。

例：computedプロパティはthis.computedProp = someValueのように設定することができないと、彼らはfunctionsないことを

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

注意、彼らはただdataプロパティと同じように使用することができます。

Answer 3

あなたはリスト

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

の項目に関連した新しいコンポーネントを作成し、数量と価格に基づいて計算されたプロパティを作成することができます。

Answer 4

平易なjavascriptの2つのオプションがあります。私はVue特有のものは言及しなかった。

最も簡単なのは、オブジェクトにgetAmountというメソッドを追加するのが最も簡単な方法です。これは、他の2つのプロパティに基づいた量を返します。

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

私は、デフォルト値としてnullでいただきたいが。
2番目のオプションは、オブジェクト記述子を使用することです。 Object.create()を使用してオブジェクトを作成するか、Object.defineProperty()を使用して既存のオブジェクトにプロパティを追加することができます。これらのメソッドの両方でオブジェクト記述子を渡すことができます。ここでは、プロパティにgetterを定義し、他のフィールドに基づいて目的の値を計算します。
今

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

、amountプロパティはちょうどitem.amountを行うことによって、quantity * priceを返します。

Answer 5

私は操作が 'additon'ではなく 'multiplication'であるべきだと思いますが。 次試してみてください。

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

Answer 6

は単に{{ item.price * item.quantity }}を使用量に基づいて価格を計算するには。私は/あなたが不必要な合計フィールドを使用してデータベースを乱雑にしたくないと仮定:-)

（合計金額を含む）例

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);}, 
 
    } 
 
})

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

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