[英]Need help for a Vue - BMI Calculator
我正在使用 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>
我用过的公式:
几个问题:
submit
- 事件:<b-form>
<b-form-group>...</b-form-group>
<b-button type="submit">Submit</b-button>
</b-form>
solution
,但这只是onSubmit()
中的一个局部变量。 要使其可用于渲染,请将其初始化为data()
的道具,如下所示。 稍后您将使用this.solution = /* new value */
在onSubmit()
中设置它。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>
绑定到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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.