Currently, I am delving into Web Development using Vue. As part of my project, I have constructed a component that calculates the BMI (Body Mass Index) of an individual. To collect the necessary data, I have implemented a form utilizing bootstrap-vue. However, I find myself in need of assistance with the JavaScript section of this task as I am uncertain about how to rectify it.
<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>
The formula utilized for calculation: