반응형
계산된 값에서 Vue.js의 v-for 값을 합산하는 방법
v-for에서 vuej를 사용하기 위해 계산된 값을 합산하려고 하는데 v-for에서 계산된 값에서 값에 액세스할 수 없기 때문에 작동하지 않는 것 같습니다.
사용자로서 총값을 {{total}로 표시해야 합니다.이것은, 다음의 합계입니다.v-model.number="totalItem(item)"
누가 길을 좀 가르쳐 주시겠어요?고마워요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="add">ADD ROW</button>
<p>$: {{ total }}</p>
<ul>
<li v-for="(item, index) in items">
<input type="text" v-model="item.name">
<input type="number" v-model.number="item.quantity" min="1">
<input type="number" v-model.number="item.price" min="0.00" max="1000000000.00" step="0.01">
<input type="number" v-model.number="totalItem(item)" readonly>
<button v-on:click="remove(index)">X</button>
</li>
</ul>
<pre>{{ items | json}}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="vuejs.js"></script>
</body>
</html>
JavaScript - Vue.js
new Vue({
el: '#app',
data: {
items: [{name: '', quantity: '', price: ''}]
},
methods: {
add: function () {
this.items.push({
name: '',
quantity: '',
price: '',
subTotal: ''
})
},
remove: function (index) {
this.items.splice(index, 1)
},
totalItem: function (item) {
return item.price * item.quantity;
}
},
computed : {
total: function() {
let sum = 0;
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}
})
난 내 답을 찾았다.간단해요.
v-model.number="item.total = item.quantity * item.price"
- 위해서
computed: {
totalItem: function(){
let sum = 0;
for(let i = 0; i < this.items.length; i++){
sum += (parseFloat(this.items[i].price) * parseFloat(this.items[i].quantity));
}
return sum;
}
}
- 각각에 대해서
computed: {
totalItem: function(){
let sum = 0;
this.items.forEach(function(item) {
sum += (parseFloat(item.price) * parseFloat(item.quantity));
});
return sum;
}
}
부모 컴포넌트에서 다음과 같은 작업을 수행합니다.
computed: {
total: function(){
return this.items.reduce(function(prev, item){
return sum + item.price;
},0);
}
}
short foreach. vuex의 getters.js를 입력할 수 있습니다.
totalInvoice: (state) => {
let sum = 0
state.itens.forEach( (item) => sum += (item.value) )
return sum
}
언급URL : https://stackoverflow.com/questions/48180028/how-to-sum-values-from-a-v-for-in-vue-js-from-a-computed-value
반응형
'programing' 카테고리의 다른 글
| EAGAIN이 무슨 뜻이죠? (0) | 2022.06.05 |
|---|---|
| C에서는 왜 포인터를 놓기 전에 던질까요? (0) | 2022.06.05 |
| keytool 오류 Keystore가 조작되었거나 암호가 잘못되었습니다. (0) | 2022.06.05 |
| vuelidate 참/거짓 확인 (0) | 2022.06.04 |
| java.util을 변환합니다.java.time 날짜로컬 날짜 (0) | 2022.06.04 |