javascript - 需要 Vue 的帮助

问题描述

我正在使用 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>

我用过的公式：

标签： javascriptvue.jsbootstrap-vue

几个问题：

提交-按钮应该在表单内，以便submit正确触发 - 事件：

<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"and 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">

javascript - 需要 Vue 的帮助 - BMI 计算器

问题描述

解决方案

推荐阅读