Vue JS pass a value inside to a CSS property

Question

I'm developing an exams portal application.

and this is my code.

<div class="" v-for="areas in knowledgeAreas">
        {{areas.area}}<div class="progress"  style="margin-top:10px;">
          <div class="progress-bar"  style="width:50%">{{areas.correctlyMarkedAnswers}} out of {{areas.numberOfQuestion}}</div>
        </div>

      </div>

and

data(){
    return{
      knowledgeAreas :[
        { area: 'Math',numberOfQuestion:10,correctlyMarkedAnswers:3,correctAnswersPercentage:12 },
        { area: 'IQ',numberOfQuestion:10,correctlyMarkedAnswers:5,correctAnswersPercentage:5 },
        { area: 'GK',numberOfQuestion:10,correctlyMarkedAnswers:8,correctAnswersPercentage:3 }
      ]
    }
  }

What I want is to dynamically pass the correctAnswersPercentage property's value to the CSS width property.

Dencio · Accepted Answer · 2018-03-05 06:23:17Z

5

I created getProgress method then pass the value of correctAnswersPercentage during iteration.

Please check the snippet below:

new Vue({
	el: "#app",
  data: {
      knowledgeAreas :[
        { area: 'Math',numberOfQuestion:10,correctlyMarkedAnswers:3,correctAnswersPercentage:50 },
        { area: 'IQ',numberOfQuestion:10,correctlyMarkedAnswers:5,correctAnswersPercentage:60 },
        { area: 'GK',numberOfQuestion:10,correctlyMarkedAnswers:8,correctAnswersPercentage:70 }
      ]
    },
    methods: {
    	getProgress: function(width) {
      	return {
          'width': width + '%',
          'background-color': 'yellow'
        };
      }
    }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
<div class="" v-for="areas in knowledgeAreas">
        {{areas.area}}<div class="progress"  style="margin-top:10px;">
          <div class="progress-bar"  v-bind:style="getProgress(areas.correctAnswersPercentage)">{{areas.correctlyMarkedAnswers}} out of {{areas.numberOfQuestion}}</div>
        </div>
      </div>
</div>

answered Mar 5, 2018 at 6:23

Dencio

5413 silver badges12 bronze badges

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

1 Comment

Dencio Over a year ago

@PathumSamararathna Np, glad to help.

Collectives™ on Stack Overflow

Vue JS pass a value inside to a CSS property

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related