Using Vuetify v-progress

[zj]

Using the dashboard template node I’m trying to include the Vuetify progress bar.

With a static template this works:

<v-progress-linear
      model-value="15"
      bg-color="pink-lighten-3"
      color="pink-lighten-1"
></v-progress-linear>

However, when I want to inject 55 as msg.payload it does show the progress bar, just without any progress, e.g. it’s empty.

<v-progress-linear
      model-value="{{ msg.payload }}"
      bg-color="pink-lighten-3"
      color="pink-lighten-1"
></v-progress-linear>

How are dynamic values in vuetify and Dashboard 2.0 supposed to work?

[joepavitt]

This is a bit of an annoying example set that Vuetify have included here.

model-value - this is used when a value is static, and not due to change.

v-model is the alternative, where you have a dynamic value (as we do here) and can be written accordingly:

<v-progress-linear
      v-model="msg.payload"
      bg-color="pink-lighten-3"
      color="pink-lighten-1"
></v-progress-linear>