Нужна помощь для Vue - Калькулятор ИМТ - PullRequest
Новая
       138

Нужна помощь для Vue - Калькулятор ИМТ

2 голосов
/ 05 августа 2020

Я изучаю Webdev с Vue. И в своем проекте я построил компонент для расчета ИМТ человека. Я создал форму с 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>

Формула, которую я использовал: 1

1 Ответ

3 голосов
/ 05 августа 2020

Некоторые проблемы:

  1. -кнопка Отправить должна быть внутри формы для правильного запуска 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 соответственно.

При вычислении ИМТ не используется правильный синтаксис для возведения числа в квадрат. Вы можете использовать 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, но в настоящее время это строки, что приведет к ошибке при вычислении ИМТ, для чего требуются числа. В настоящее время для типов ввода неправильно заданы значения 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">

Изменить привязку к числовым входам

...