Currently implementing Vue.js with Typescript and aiming to utilize reduce for summing up the values of desktopCnt and mobileCnt from the deviceCount array to display their total numbers.
The deviceCount array structure is as follows:
[
{
"_id":{
"device":1
},
"mobileCnt":451
},
{
"_id":{
"device":0
},
"desktopCnt":210
},
{
"_id":{
"device":2
},
"mobileCnt":88
},
{
"_id":{
"device":10
},
"mobileCnt":57
}
]
An example of the code implementation:
<template>
<span>
PC :
{{ deviceCount.reduce((r, a) => (r += a.desktopCnt), 0) }}
Mobile :
{{ deviceCount.reduce((a, { desktopCnt }) => a + mobileCnt, 0) }}
</span>
</template>
Script section for fetching data:
<script lang="ts">
import Vue from 'vue';
import axios from 'axios';
import { DeviceCount } from '../../components/models';
export default Vue.extend({
data() {
return {
deviceCount: [] as Array<DeviceCount>,
};
},
created() {
this.initData();
},
methods: {
async initData() {
// Fetching data and setting it to deviceCount array
},
async getDeviceCount() {
// Processing fetched data here
return processedData;
},
},
});
</script>
Edit made on the interface:
interface DeviceCount
interface DeviceCount {
_id: {
device: string;
};
avgPrice: number;
avgQuantity: number;
buyRatio: number;
goodsCnt: number;
quantity: number;
revenue: number;
totalEvents: number;
uniqueEvents: number;
users: number;
mobileCnt: number;
desktopCnt: number;
}
console.log(item) in script
https://i.stack.imgur.com/ebPEa.png
Despite trying different approaches, encountering the error message:
TypeError: _vm.deviceCount.reduce is not a function
Troubleshooting assistance requested to identify the origin of this error. Thanks!