You can easily achieve this using something like topic to control what gets updated.
e.g.
<template>
<div>
<div>
<p :style="{'color' : (count > 5 ? 'red' : 'green' )}">Current Count: {{ count }}</p>
<p :style="{'status' : (status == 'fault' ? 'red' : 'black' )}">Current Status: {{ status }}</p>
<v-btn @click="resetCounter">Reset Counter</v-btn>
</div>
<div v-show="lastError" >
<p style="color: red">Last Error: {{ lastError }} @ {{lastErrorTime}}</p>
<v-btn type="danger" @click="resetError">Reset Error</v-btn>
</div>
</div>
</template>
<script>
export default {
data() {
// define variables available component-wide
// (in <template> and component functions)
return {
count: 0,
status: "init",
lastError: null,
lastErrorTime: null,
}
},
watch: {
msg: function () {
if (this.msg.topic === 'counter') {
this.count = this.msg.payload
} else if (this.msg.topic === 'status') {
this.status = this.msg.payload
} else if (this.msg.topic === 'error') {
this.lastError = this.msg.payload
this.lastErrorTime = (new Date()).toISOString()
}
}
},
methods: {
resetCounter() {
this.count = 0
},
resetError() {
this.lastError = null
}
}
}
</script>
demo flow:
[{"id":"7d71bd185726b4cc","type":"ui-template","z":"862ec766f2af6f61","group":"b1da20a2d7d13012","page":"","ui":"","name":"","order":0,"width":"9","height":"10","head":"","format":"<template>\n <div>\n <div>\n <p :style=\"{'color' : (count > 5 ? 'red' : 'green' )}\">Current Count: {{ count }}</p>\n <p :style=\"{'status' : (status == 'fault' ? 'red' : 'black' )}\">Current Status: {{ status }}</p>\n <v-btn @click=\"resetCounter\">Reset Counter</v-btn>\n </div>\n <div v-show=\"lastError\" >\n <p style=\"color: red\">Last Error: {{ lastError }} @ {{lastErrorTime}}</p>\n <v-btn type=\"danger\" @click=\"resetError\">Reset Error</v-btn>\n </div>\n\n </div>\n\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n count: 0,\n status: \"init\",\n lastError: null,\n lastErrorTime: null,\n }\n },\n watch: {\n // watch for any changes of \"count\"\n msg: function () {\n if (this.msg.topic === 'counter') {\n this.count = this.msg.payload\n } else if (this.msg.topic === 'status') {\n this.status = this.msg.payload\n } else if (this.msg.topic === 'error') {\n this.lastError = this.msg.payload\n this.lastErrorTime = (new Date()).toISOString()\n }\n }\n },\n methods: {\n resetCounter() {\n this.count = 0\n },\n resetError() {\n this.lastError = null\n }\n }\n }\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1280,"y":300,"wires":[[]]},{"id":"b09d0db34b263126","type":"inject","z":"862ec766f2af6f61","name":"counter","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"counter","payload":"(\t $minimum := 1;\t $maximum := 10;\t $round(($random() * ($maximum-$minimum)) + $minimum, 0)\t)","payloadType":"jsonata","x":1090,"y":260,"wires":[["7d71bd185726b4cc"]]},{"id":"1976bccce7d9c2da","type":"inject","z":"862ec766f2af6f61","name":"status","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"status","payload":"(\t $list := [\"normal\", \"fault\", \"running\", \"stopped\"]; \t $rand := $floor($random() * $count($list)); \t $list[$rand]\t)","payloadType":"jsonata","x":1095.892333984375,"y":308.8888854980469,"wires":[["7d71bd185726b4cc"]]},{"id":"a6f82f13d5f715f8","type":"inject","z":"862ec766f2af6f61","name":"error","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"error","payload":"(\t $list := [\"overheat\", \"crash\", \"stall\", \"fuse\"]; \t $rand := $floor($random() * $count($list)); \t $list[$rand]\t)","payloadType":"jsonata","x":1090,"y":360,"wires":[["7d71bd185726b4cc"]]},{"id":"b1da20a2d7d13012","type":"ui-group","name":"Chart Tests","page":"94b0d43f03c8e17e","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"94b0d43f03c8e17e","type":"ui-page","name":"Chart Tests","ui":"22ea43815413e748","path":"/chart-tests","icon":"home","layout":"flex","theme":"c2ff5ba1f92a0f0e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":9,"className":"","visible":"true","disabled":"false"},{"id":"22ea43815413e748","type":"ui-base","name":"base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"c2ff5ba1f92a0f0e","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#6771f4","bgPage":"#e5dcdc","groupBg":"#ffffff","groupOutline":"#d39292"},"sizes":{"pagePadding":"6px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"6px","density":"default"}}]
