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
}
コードの全文
<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>