나는 간단한 할 일 목록으로 연습하고 vue.js있습니다. price배열 내에서 모두 합산하려고합니다 . 이를 위해 내부에 약간의 함수를 작성 computed했지만 뭔가 잘못되었습니다 js.
var app= new Vue({
el: "#app",
data: {
message: "Lista della spesa",
seen: true,
todos: [
{msg: 'prezzemolo', price: 10},
{msg: 'pomodori', price: 20},
{msg: 'zucchine', price: 5}
],
},
methods: {
addToDo: function() {
if(this.nome && this.prezzo) {
this.todos.push({msg: this.nome, price: this.prezzo});
}
this.nome = "";
this.prezzo = "";
},
RemoveThis: function(index) {
this.todos.splice(index,1);
}
},
computed: {
totale: function() {
var total = 0;
this.todos.forEach(function() {
total += this.todos.price
});
return total;
}
}
});
내부에 forEach기능을 방해하는 무언가가 있는데, 그 이유를 아는 사람이 있습니까?
당신이 전달하는 콜백 함수 내에서 forEach, this구성 요소를 가리킨 NTO 않습니다, 그것은이다 undefined기본적으로.
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
콜백 함수는 각각 todo을 인수로 수신 하므로 예제는 다음과 같습니다.
totale: function(){
var total = 0;
this.todos.forEach(function (todo) {
total += todo.price
});
return total;
}
일반적으로 forEach를 사용하지 않고 reduce를 사용 합니다. 화살표 기능과 함께 멋진 한 줄이됩니다.
totale: function () {
return this.todos.reduce((sum, todo) => sum + todo.price, 0)
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다