背景:我的应用可以动态添加输入。每次创建新输入时,都会在费用数组中创建一个新对象。每个新输入都接受一个新值,并显示在输入的右侧。
问题:我只是在尝试-
<template>
<div v-for="expense in expenses" :key="expense">
<input v-model="expense.expensesValue" type="number"> - {{expense.expensesValue}}
</div>
<button @click="addInputs()">Add</button>
</template>
<script>
export default {
name: "form",
data() {
return{
expenses: [{
expensesValue: 0
}]
}
},
methods: {
addInputs(){
this.expenses.push({
expensesValue: 0
})
}
}
}
</script>
答案 0 :(得分:1)
由于您正在对v-model
数组中每个项目的值使用expenses
,因此您已经在跟踪费用值。尽管可以确保将其转换为数字,但我会使用v-model.number="expense.expensesValue"
。
要获取总数,可以使用computed
属性和reduce函数。
new Vue({
el: "#app",
data: {
expenses: [{
expensesValue: 0
}]
},
methods: {
addInputs(){
this.expenses.push({
expensesValue: 0
})
}
},
computed: {
total() {
return this.expenses.reduce((acc, curr) => {
acc += curr.expensesValue;
return acc;
}, 0);
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<h2>Todos:</h2>
<div v-for="(expense, idx) in expenses" :key="idx">
<input v-model.number="expense.expensesValue" type="number"> - {{expense.expensesValue}}
</div>
<p>total {{ total }}</p>
<button @click="addInputs()">Add</button>
</div>