javascript - 如何计算动态创建的元素内的值
问题描述
我在单击按钮时在 HTML 表中创建输入字段并想做一些计算,但它没有按我的意愿发生,我正在处理 vue.js
我做了什么
new Vue({
el: '#app',
data() {
return {
tableDatas: []
}
},
methods: {
btnOnClick(v) {
this.tableDatas.push({
itemname: 'item',
quantity: 1,
sellingprice: 55,
amount: 0,
});
},
calculateQty(tableData) {
let Amount = parseFloat(tableData.quantity) * parseFloat(tableData.sellingprice)
if (!isNaN(Amount)) {
tableData.amount = Amount.toFixed(2);
console.log(tableData.quantity)
}
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.5/vue.js"></script>
<div id="app">
<button type="button" @click="btnOnClick">Add</button>
<table class="table table-striped table-hover table-bordered mainTable" id="Table">
<thead>
<tr>
<th class="itemName">Item Name</th>
<th>Quantity</th>
<th>Selling Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr v-for="(tableData, k) in tableDatas" :key="k">
<td>
<input class="form-control" readonly v-model="tableData.itemname" />
</td>
<td>
<input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.quantity" v-on:keyup="calculateQty(tableData)" />
</td>
<td>
<input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.sellingprice" v-on:keyup="calculateSPrice(tableData)" />
</td>
<td>
<input readonly class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.amount" />
</td>
</tr>
</tbody>
</table>
<div>
<label>Total Row's Amount</label>
<input type="text" disabled>
</div>
</div>
因此,当我创建一行时,我想计算我创建的每个相应行的金额,并且我正在使用 plain 进行此操作javascript
,接下来假设创建了 5 行我想在 total Row 的 Amount 字段中显示总金额
当我在键上的数量字段内键入任何内容时,我正在计算,但是当我按下back space
数量不会设置为 0 时,我必须为此键入 0,默认情况下数量字段的值为 1。我正在这样做一切都简单javascript
我只想知道如何使用 vue.js 来使它更容易和更简单
解决方案
new Vue({
el: "#app",
data() {
return {
tableDatas: []
};
},
methods: {
btnOnClick(v) {
this.tableDatas.push({
itemname: "item",
quantity: 1,
sellingprice: 55,
amount: 0
});
}
},
computed: {
calculate() {
return (
this.tableDatas
.map(tableData => {
return tableData.amount = (
parseFloat(tableData.quantity) *
parseFloat(tableData.sellingprice)
);
})
.reduce((total, current) => total + current, 0) || 0
);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" @click="btnOnClick">Add</button>
<table class="table table-striped table-hover table-bordered mainTable" id="Table">
<thead>
<tr>
<th class="itemName">Item Name</th>
<th>Quantity</th>
<th>Selling Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr v-for="(tableData, k) in tableDatas" :key="k">
<td>
<input class="form-control" readonly v-model="tableData.itemname" />
</td>
<td>
<input class="form-control text-right" type="number" min="0" step="1" v-model="tableData.quantity" />
</td>
<td>
<input class="form-control text-right" type="number" min="0" step=".5" v-model="tableData.sellingprice" />
</td>
<td>
<input readonly class="form-control text-right" type="number" min="0" step="1" v-model="tableData.amount" />
</td>
</tr>
</tbody>
</table>
<div>
<label>Total Row's Amount</label>
<input type="text" disabled :value="calculate">
</div>
</div>
编辑:
我让我的想象力疯狂,我也用组件做到了:
Vue.component("form-row", {
template: "#row-template",
props: {
itemname: String,
quantity: Number,
sellingprice: Number,
amount: Number
},
computed: {
quantitySynced: {
get() {
return this.quantity;
},
set(v) {
this.$emit("update:quantity", +v);
}
},
sellingpriceSynced: {
get() {
return this.sellingprice;
},
set(v) {
this.$emit("update:sellingprice", +v);
}
},
amountSynced() {
this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice));
return this.amount
}
}
});
new Vue({
el: "#app",
data() {
return {
tableDatas: []
};
},
methods: {
btnOnClick(v) {
this.tableDatas.push({
itemname: "item",
quantity: 1,
sellingprice: 55,
amount: 55
});
}
},
computed: {
calculate() {
return (
this.tableDatas.reduce((total, {amount}) => total + amount, 0) || 0
);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" @click="btnOnClick">Add</button>
<table class="table table-striped table-hover table-bordered mainTable" id="Table">
<thead>
<tr>
<th class="itemName">Item Name</th>
<th>Quantity</th>
<th>Selling Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<form-row v-for="(row, key) in tableDatas" :key="key" v-bind.sync="row"></form-row>
</tbody>
</table>
<div>
<label>Total Row's Amount</label>
<input type="text" disabled :value="calculate">
</div>
</div>
<script type="text/x-template" id="row-template">
<tr>
<td>
<input class="form-control" readonly :value="itemname" />
</td>
<td>
<input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" />
</td>
<td>
<input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" />
</td>
<td>
<input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" />
</td>
</tr>
</script>
推荐阅读
- c# - 我的刽子手游戏显示的破折号“-”比预期的要多
- c++ - 使用自己的迭代器并行执行
- php - 票务系统中的php漏洞
- java - 检测到 Mockito 空指针异常和未完成的存根
- python - python3中的librosa模块导入引发警告
- validation - How to access validation border in Blazor to modify style?
- anaconda - Unable to use anaconda jupyter on non default startup folder in cygwin
- python - Selenium isn't detecting the chrome prompt to open zoom application as an alert
- ios - Callback violates Inversion of Control
- python - 自动加载表上的所有 SQLAlchemy 查询是否在导入后运行?