Vue.JS data in HTML attribute

Question

I'm working with Vue.JS right now and a status bar and I was wondering how to put data from vue in an html attribute.

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">${this.score}% Complete</span>
    </div>
</div>

I already tried this:

<div class="progress">
    <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">${this.score}% Complete</span>
    </div>
</div>

But the v-bind: doesn't work.

try aria-valuenow="{{ score }} and if you changed the default brackets it will be like aria-valuenow="${score}%" — Frnak
– Frnak, Commented Mar 16, 2017 at 14:11
aria-valuenow="{{ score }}" will not work. Interpolation in attributes are now deprecated, instead use v-bind like v-bind:aria-valuenow="score" or :aria-valuenow="score". — Gerardo
– Gerardo, Commented Mar 16, 2017 at 14:14

Roy J · Accepted Answer · 2017-03-16 14:10:27Z

3

Works for me.

new Vue({
  el: '#app',
  data: {
    score: 20
  }
});

[aria-valuenow="20"] {
  color: red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<div id="app" class="progress">
  <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    <span class="sr-only">${{this.score}}% Complete</span>
  </div>
</div>

answered Mar 16, 2017 at 14:10

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jan-Willem de Boer Over a year ago

Hmm, I tried it via your snippet and it worked. Thanks dude!

Brandon Waring Over a year ago

Also worked for me. Got stuck with binding my value within curly brackets. Removed them and its good now.

Collectives™ on Stack Overflow

Vue.JS data in HTML attribute

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related