需要帮助Vue-BMI计算器
好
我正在用Vue学习Webdev。在我的项目中，我构建了一个组件来计算一个人的BMI。我创建了一个表单bootstrap-vue以获取所需的值。现在，我需要JavaScript部分的帮助。我只是不知道如何纠正它。
<template>
<div class="bmi-calc">
<b-card title="BMI Calculator" img-src="https://picsum.photos/600/300/?image=25" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
<b-form @submit="onSubmit" v-if="show">
<!-- Height -->
<b-form-group id="input-group-height" label="height" label-for="input-height" description="Height in cm">
<b-form-input id="input-height" v-model="form.height" type="height"></b-form-input>
</b-form-group>
<!-- Weight -->
<b-form-group id="input-group-weight" label="weight" label-for="input-weight" description="Weight in kg">
<b-form-input id="input-weight" v-model="form.weight" type="weight"></b-form-input>
</b-form-group>
</b-form>
<b-button type="submit" variant="primary">Submit</b-button>
<div>Solution is: <strong>{{ solution }}</strong></div>
</b-card>
</div>
</template>
<script>
export default {
data () {
return {
form: {
height: '',
weight: ''
},
show: true
}
},
methods: {
onSubmit (evt) {
evt.preventDefault()
var solution = null
solution = this.weight / (this.height) ^ 2
},
onReset (evt) {
evt.preventDefault()
// Reset our form values
this.form.height = ''
this.form.weight = ''
// Trick to reset/clear native browser form validation state
this.show = false
this.$nextTick(() => {
this.show = true
})
},
}
}
</script>
我使用过的公式： 
东尼19
一些问题：
- 在提交-按钮的形式应为内以触发
submit正确-event：
<b-form>
<b-form-group>...</b-form-group>
<b-button type="submit">Submit</b-button>
</b-form>
- 模板引用了
solution，但这只是内部的局部变量onSubmit()。要使其可用于渲染，请将其初始化为来自的道具data()，如下所示。稍后将onSubmit()使用进行设置this.solution = /* new value */。
export default {
data() {
return {
//...
solution: 0,
}
}
}
onSubmit()引用this.weight和this.height，但是这些值实际上存储在之下this.form，因此它们应该分别是this.form.weight和this.form.height。BMI计算未使用正确的语法对数字求平方。您可以使用
Math.pow()，也可以将其与自身相乘：
export default {
methods: {
onSubmit() {
this.solution = this.form.weight / Math.pow(this.form.height, 2)
// OR
this.solution = this.form.weight / (this.form.height * this.form.height)
}
}
}
- 该
<b-form-input>s的必然form.height和form.weight，但这些都是当前字符串，这将导致在BMI计算，这需要数错误。当前，输入类型错误地设置为type="height"和type="weight"，但是应该设置为type="number"。另外，当v-model用于数字时，请确保使用.number修饰符，以便将值更新为正确的类型：
<b-form-input v-model.number="form.weight" type="number">
<b-form-input v-model.number="form.height" type="number">
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在给出 BMI 值时，如何阻止我的 BMI 计算器添加不需要的“无”？
- 2
Bash Shell中的BMI计算器
- 3
BMI计算器错误？爪哇
- 4
需要解决的计算器问题
- 5
创建BMI计算器时我的计算已关闭
- 6
JavaScript中的For循环帮助，用于更改计算器
- 7
C ++帮助中的计算器。无法返回运行总计
- 8
BMI计算器始终返回0。（Python）
- 9
Android BMI计算器应用程序意图错误
- 10
C编程中的BMI计算器...无法运行？
- 11
Android BMI计算器应用程序意图错误
- 12
BMI计算器实验室找不到问题
- 13
我是 android studio 和 java 的新手，缺乏做计算器的知识和逻辑。需要帮助
- 14
Javascript-计算器需要显示货币符号
- 15
质数计算器需要太多时间（JAVA）
- 16
需要帮助，编写python BMI calc
- 17
需要Javascript计算表格帮助
- 18
具有名称、体重、身高、BMI 和文本的 BMI 计算器，使用数组和循环
- 19
经典ASP-更新印花税计算器百分比所需的帮助
- 20
简单计算器无法按预期工作-入门帮助（C）
- 21
C＃问题中的BMI计算器有关提取先前键入的数据的问题
- 22
无法解压缩不可迭代的int对象。BMI计算器
- 23
如何在BMI计算器字段的旁边/下方而不是页面顶部添加错误消息？
- 24
BMI计算器分配。C＃。我究竟做错了什么？
- 25
我打算在Pythion3中制作一个BMI BMR计算器
- 26
需要一些指导来使用C＃制作GUI计算器吗？
- 27
Javascript表单计算器，其中onInput和onChange都指向相同的函数。需要存储onChange
- 28
需要使用小型计算器的一些指导，我正在研究Ruby
- 29
我做了一个年龄计算器，我需要刷新以重新使用
我来说两句