Help us understand the problem. What is going on with this article?

vue.js 小数点が省略されたが、表示させたい!(例えば、10->10.0で表示したい)

jsは整数の場合、小数が自動的に省略されたことがついに気づきました。

例えば、10ではなく、10.0で画面で表示したい場合、
postmanでPrettyだと、10で表示しています。「あれ?」と思って、Rawで確認すると、10.0になっています。

vue.jsでどうやって10.0で表示できるの?
色々調べて、下記のコードでできた!

// 負でない整数場合、小数一桁「0]を補足する
var getFloatStr = function (num) {
        if (!/\./.test(num)) {
          num += '.0'
        }
        num = num.match(/\d+\.\d{1}/)[0]
        // console.log(num)
        return num
      }

スクリーンショット 2020-11-27 13.27.04.png

コードの全文

<template>
    <b-card header="結果" bg-variant="light" class="text-center" style="margin-bottom:10px;">
       <b-card-text>
          <div>
          <input style="display:none" type="text" v-model="childrenMessage">
            <element-table
              ref="table"
              :data="data"
              :columns="columns"
              />
            </div>
      </b-card-text>
    </b-card>
</template>
<script>

export default {
  props: ['message'],
  data () {
    return {
      childrenMessage: '',
      columns: [
        [
          {
            title: '順位',
            field: 'ranking'
          },
          {
            title: '点数',
            field: 'score'
          },
          {
            title: '名前',
            field: 'name'
          },
          {
            title: 'メモ',
            field: 'memo'
          }
        ]
      ],
      data: []
    }
  },
  created () {
    this.childrenMessage = this.message
  },
  watch: {
    message (val) {
      const result = this.message

      const arrResult = []
      const objResult = {}

      // 負でない整数場合、小数一桁「0]を補足する
      var getFloatStr = function (num) {
        if (!/\./.test(num)) {
          num += '.0'
        }
        num = num.match(/\d+\.\d{1}/)[0]
        // console.log(num)
        return num
      }
      for (var i = 0; i < result.length; i++) {
        objResult['ranking'] = result[i]['ranking']
        objResult['score'] = getFloatStr(JSON.stringify(result['score']))
        objResult['name'] = result[i]['name']
        objResult['memo'] = result[i]['memo']
        arrResult.push(objResult)
      }
      this.data = arrResult
    }
  }
}
</script>

参考先:
1、js 输入int类型数字后自动在后面加.00,输入double型保留小数点后两位

gosairei1207
このサイトにおける掲載内容はあくまで私自身の見解であり、私の所属団体・企業における立場、戦略、意見を代表するものではありません。掲載内容は執筆時点の情報をもとにしており、必ずしも最新情報であるとは限りません。 できる限り正確を期すように心がけていますが、間違いがある可能性もあります。その際はご指摘いただけると幸いです。よって、記載内容は自己責任のもとで実施ください。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away