やりたいこと

昨日からVue.jsの勉強を始めました。
テキストを読んで実際に作ってみようと思い、
体重と身長とを入力したらBMI値を表示するJavascript(Vue.js)で記述したいのですが、
なかなか思うようにできません。下記のコードでは、weightとheightに数値を入力してもクリアされてしまうだけで、bmiの計算もしてくれません。
どこが間違っているのかご指摘ください。

環境

Windows10
Vue.js(v2.5.16)

コード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>BMI calculator</title>
6  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
7  <style>
8    div#app {background-color:YELLOW;}
9  </style>
10</head>
11<body>
12
13<div id="app">
14  <h2>BMI Calculator</h2>
15  <form v-on:submit.prevent>
16    <span style="display:block; line-height:2em;">
17      <label for="weight">weight</label>
18      <input type="number" name="weight" v-model="weight">
19      <span>kg</span>
20    </span>
21
22    <span style="display:block; line-height:2em">
23      <label for="height">height</label>
24      <input type="number" name="height" v-model="height">
25      <span>cm</span>
26    </span>
27
28    <span style="display:block; line-height:2em;">
29      <button v-on:click="calcBMI">CALC</button>
30    </span>
31
32    <span style="display:block; line-height:2em">
33      <span>{{ params.bmi }}</span>
34    </span>
35
36  </form>
37  <pre>{{ $data }}</pre>
38</div>
39
40<script>
41  let app = new Vue({
42    el: "#app",
43    data: {
44      message: "Hello Vue.js!",
45      weight: "",
46      height: "",
47    },
48    methods: {
49      calcBMI: function(event){
50        if (this.weight == "" && this.height =="")
51          alert("You should input data")
52          return
53        let params:{
54          bmi = weight / ((height * 0.01) * (height * 0.01))
55        }
56      }
57    }
58
59  })
60</script>
61</body>
62</html>

行動規範の内容に同意します

回答1件

修正箇所が複数あるので箇条書きで記載させていただきます。

v-on:clickで関数名を指定する際は、関数名の後に()が必要です。
Vueインスタンスのdataプロパティに、変数bmiを追加し、CALCボタンを押下することでこの変数の値を更新するように変更。

（これに伴い、HTML上BMIを表示する箇所は"params.bmi"→"$data.bmi"に変更

基本的には、

【スクリプト側】dataプロパティに変数を定義して、この値を更新する
【HTML側】上記の変数を（{{ $data.bmi }}のように）表示する

というような処理を書くのがシンプルでよいかと思います。

以上のように変更しまして、最終的なソースは下記のようになります。

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>BMI calculator</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
      div#app {
        background-color: YELLOW;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>BMI Calculator</h2>
      <form v-on:submit.prevent>
        <span style="display: block; line-height: 2em;">
          <label for="weight">weight</label>
          <input type="number" name="weight" v-model="weight" />
          <span>kg</span>
        </span>

        <span style="display: block; line-height: 2em;">
          <label for="height">height</label>
          <input type="number" name="height" v-model="height" />
          <span>cm</span>
        </span>

        <span style="display: block; line-height: 2em;">
          <button v-on:click="calcBMI()">CALC</button>
        </span>

        <span style="display: block; line-height: 2em;">
          <span>{{ $data.bmi }}</span>
        </span>
      </form>
      <pre>{{ $data }}</pre>
    </div>

    <script>
      let app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue.js!",
          weight: 0,
          height: 0,
          bmi: 0,
        },
        methods: {
          calcBMI: function () {
            if (this.weight == "" && this.height == "") {
              alert("You should input data");
              return;
            }
            this.bmi =
              this.weight / (this.height * 0.01 * (this.height * 0.01));
          },
        },
      });
    </script>
  </body>
</html>

投稿2021/05/30 03:30

編集2021/05/30 03:35

hallen0225

総合スコア587

BuhKeil

2021/05/30 06:40

早々のご指摘＆ご返信ありがとうございます。 "this.hoge"の使い方がわかってきました。それから私のコードでは、 methods:{ calcBMI: function(event){ と書きましたが、hallen0225さんの修正コードだと"event"の文字がなくなっています。これは無くてもよいものなのでしょうか？

BuhKeil

2021/05/30 06:49

それと追加で質問してもよいでしょうか。 weight と heightとには、共に<input type="number">としています。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures を参照すると、number型は、浮動小数点を扱えるとあります。しかし、いざ"84.3"のような入力をすると、「有効な値を入力してください。有効な値として最も近いのは84と85です」とポップアップが出ます。あたかも整数しか受け付けないような印象を持ちます。結局はBMI値は得られているのですが、このポップアップは無視すればよいのか、何かまだ足りない記述があるのかわかりません。この点についても、お分かりのことがあれば教えてください。

hallen0225

2021/05/30 07:44 編集

event（引数）に関しては、今回のコードでは引数を使用する処理がないため省略させていただきました。（既に試していただいたかもしれませんが、この引数は省いても動作するものです） number型について、下記のページをご参照ください。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number 追加の属性 - stepの項目に、下記のように記載されております。（以下引用） number 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を除いて、整数の入力のみを許可します。そのため、仮に0.1刻みで入力できるようにしたい場合は、 <input type="number" name="weight" step="0.1" v-model="weight" /> というように、step属性を指定する必要があるようです。

行動規範の内容に同意します