Template node with vue.js. Data was sent from the previous node, but it does not appear on the dashboard. If you do not go back to another group page, the template does not appear. How do I solve this problem?
This is Template Code & An example of the data type being transferred.
<template>
<v-card title="Device Information" flat>
<template v-slot:text>
<v-text-field v-model="search" label="Enter the Keyword" prepend-inner-icon="mdi-magnify" variant="outlined"
hide-details single-line></v-text-field>
</template>
<v-data-table fixed-header :headers="headers" :items="processedPayload" :search="search">
<template v-slot:item.value="{ item }">
{{ item.value }}
</template>
<template v-slot:item.Unit="{ item }">
<v-chip :color="getValueColor(item.Contents, item.Value)">
{{ getLevel(item.Contents, item.Value) }}
</v-chip>
</template>
<template v-slot:header="{ props }">
<tr>
<th v-for="header in props.headers" :key="header.text" class="center" style="font-weight:bold;">
{{ header.text }}
</th>
</tr>
</template>
</v-data-table>
</v-card>
</template>
<script>
export default {
data: () => ({
search: '',
headers: [
{ title: 'Contents', key: 'Contents' },
{ title: 'Value', key: 'Value' },
{ title: 'Unit', key: 'Unit' },
{ title: 'Device Name', key: 'Devicename' },
],
}),
computed: {
processedPayload() {
// msg?.payload 데이터를 처리하여 새로운 구조로 반환
return this.msg?.payload.map(item => {
return {
Contents: item.Contents,
Value: item.Value,
Unit: item.Unit,
Devicename: item.Devicename,
};
});
}
},
methods:{
/*
getValueColor(Contents, Value) {
const level = this.getLevel(Contents, Value);
if (!level) {
return 'white'; // default color when level is undefined or null
}
if (Contents === "Lora RSSI") {
if (Unit === "Very Strong") return '#C3423F';
else if (Unit === "Strong") return '#4f772d';
else if (Unit === "Normal") return '#0077b6';
else if (Unit == "Weak") return '#0077b6';
else return '#4f772d';
}
},
*/
}
};
</script>
[
{"Contents":"Device EUI","Value":"ac1f09ffff0bab10","Unit":" ","Devicename":"RAK_03"},{"Contents":"Gateway ID","Value":"ac1f09fffe0622ea","Unit":" ","Devicename":"RAK_03"},{"Contents":"Lora RSSI","Value":-49,"Unit":"Strong","Devicename":"RAK_03"},
{"Contents":"Lora SNR","Value":10.5,"Unit":"Very Good","Devicename":"RAK_03"},{"Contents":"Latitude","Value":37.6371,"Unit":" ","Devicename":"RAK_03"},{"Contents":"Longitude","Value":126.6786,"Unit":" ","Devicename":"RAK_03"},{"Contents":"Altitude","Value":0,"Unit":" ","Devicename":"RAK_03"},{"Contents":"Frequengy","Value":922.7,"Unit":"MHz","Devicename":"RAK_03"},{"Contents":"DR","Value":1,"Unit":" ","Devicename":"RAK_03"}
]
