Subflow - UI Group

Dashboard
11

A lot of the angular stuff like ng-if ng-show ng-repeat have vue equivalents e.g. in vue these are:

  • v-if: This conditionally renders an element based on a truthy or falsy expression. Similar to ng-if, it removes the element from the DOM when the condition is false.
  • v-show: This conditionally displays or hides an element based on a truthy or falsy expression. It keeps the element in the DOM, but toggles its display style property.
  • v-for: This iterates over an array or object, creating a new element for each item. It's similar to ng-repeat, but offers more flexibility and features.

For sending messages back to Node-RED, we have added send() functionality so is almost identical. Instead of ng-click="send({...}) you would do @click="send({...})

Regarding your question around an angularjs video you found that got you up and running, I am not certain there is a specific dashboard 2 equivalent video however, there are lots of VUE videos around that cover this. Not trying to dodge the subject but rather state what you learned from the angularjs video can almost directly be applied to Dashboard-2 but using v- instead of ng-

PS, the dashboard 2 docs DO cover this but to summarise for you here directly.

  • element control (equivelants of ng-xxxx) are all v-xxxx
  • attribute binding (e.g. class, disabled) can be done use the colon.
    • e.g. :class="msg.myClass"
  • event hookup is done using @ e.g. @click="myMethod"
    • e.g. @click="send({...})

Obviously this is scratching the surface but having used both, i can tell you i find personally vue cleaner and faster and easier.

1 Like