Ich habe eine Liste, welche Elemente wie dieseSumme zwei Eigenschaften eines Elements in der Liste (Javascript)
{ quantity: '', price: '', amount: '' }
hat Diese Elemente dynamisch hinzugefügt, Meine Frage ist, ist es möglich, Menge und Preis zu summieren zu kommen mit Betragswert, so dass sich der Betragswert auch in Bezug auf Preis oder Menge ändert?
vielleicht brauchen Sie eine Getter-Funktion für Menge:
a = ({
quantity: '',
price: '',
get amount() {
return +this.quantity + +this.price;
}
})
dann können Sie a.amount für die Summe der Menge und Preis zugreifen.
Da Sieverwenden, können Sie Ihr Ziel einfach erreichen, indem Sie [computed][1] Eigenschaften verwenden.
Beispiel:
export default {
data() {
return {
quantity: '',
price: ''
}
},
computed: {
amount() {
return this.quantity + this.price
}
}
}
Beachten Sie, dass computed Eigenschaften nicht wie this.computedProp = someValue eingestellt werden und sie sind nicht functions, können sie genau wie data Eigenschaften verwendet werden.
Sie könnten eine neue Komponente, die
var vm = new Vue({
el: '#example',
data: {
quantity: '',
price: ''
},
computed: {
amount: function(){
return this.quantity * this.price
}
}
})auf das Element in der Liste im Zusammenhang erstellen und dann eine berechnete Eigenschaft erstellen, die auf die Menge und Preis basiert.
Obwohl ich auch persönlich mit der Stimmung von 'this.quantity * this.price' einverstanden bin, aber OP hat aus irgendeinem Grund nach der Summe gefragt. :/ –
Oh ich sehe, ich bleibe dabei, da es keinen Sinn macht, Menge und Preis zu summieren. OP hat dort wahrscheinlich einen Tippfehler gemacht. Unsere Antworten sind die gleichen, gepostet zur gleichen Zeit: P – Borjante
Ich habe keine upvotes zu verschonen. :) aber deine ist richtig –
Es gibt ein paar plain javascript Optionen. Ich habe keine Vue-spezifischen Sachen erwähnt.
Die einfachste, mir wäre, eine getAmount -Methode zu Ihren Objekten hinzuzufügen, die den Betrag basierend auf Ihren anderen zwei Eigenschaften zurückgeben würde.
z.B.
var item = {
quantity: 3,
price: 5.00,
getAmount: function() {
return this.quantity * this.price
}
}
Obwohl ich würde mit null als Standardwerte.
Eine zweite Option ist die Verwendung von Objektdeskriptoren. Sie können ein Objekt mit Object.create() erstellen oder einem bereits vorhandenen Objekt mithilfe von Object.defineProperty() Eigenschaften hinzufügen. Mit beiden Methoden können Sie einen Objektdeskriptor übergeben, in dem Sie für Ihre Eigenschaft eine definieren können, die Ihren gewünschten Wert basierend auf Ihren anderen Feldern berechnet.
z.B.
var item = Object.create({
quantity: null,
price: null,
}, {
amount: {
get: function() { return this.quantity*this.price }
}
})
nun die amount Eigenschaft quantity * price zurückkehren, nur durch item.amount tun.
Obwohl ich denke, die Operation sollte "Multiplikation" statt "Zusatz" sein. Versuchen Sie Folgendes:
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);Um den Preis zu berechnen einfach basierend auf Menge {{ item.price * item.quantity }} verwenden. Ich nehme an, Sie wollen nicht Ihre Datenbank mit einem nicht benötigten Gesamtfeld Krempel :-)
Beispiel (einschließlich Gesamtpreis)
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>
Jedes Mal, Preis, Menge und/oder Betragsänderung in Ihrem Objekt, müssen Sie Ihre Summe aktualisieren, indem Sie ein Änderungsereignis auslösen und dann die Berechnung durchführen. – John