How to bind to element?

Question

 Vuex.Store({
  state: {
    percentage: 0,
  },
...

I want to do <progress max="100" v-model="percentage"></progress> but I'm getting error 'v-model' directives aren't supported on <progress> elements. How to do it otherwise?

I would like to render it as such (or similar)

<progress max="100" value="0"></progress>

Please provide more details. What's the ``prop`` that needs to take the value from the store? — Majed Badawi, Jun 12 '20 at 14:39
Not sure what you mean with prop. I have a variable in the Vuex state storing the percentage number. — naglas, Jun 12 '20 at 14:40
Have you tried replacing `v-model="percentage"` with `:value="percentage"` ? — Seblor, Jun 12 '20 at 14:44
Using `:value="percentage"` renders ``. The value attribute is missing. — naglas, Jun 12 '20 at 14:47

score 1 · Accepted Answer · answered Jun 12 '20 at 14:49

Add this to the parent of the progress component;

import { mapState } from "vuex";

computed: {
               ...mapState({
                    percentage: state => state.percentage,
               }),
}

This will get the updated values from the store. Then, bind it to the value of the component:

<progress max="100" :value="percentage"></progress>

How to bind to element?

1 Answers1