Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

132
Views
How to make class with with variable inside of html element in Vue?

I just want to write class plan__part_${this.res} within element

v-bind:class="{[`plan__part_${this.res}`]: true }"
:key="item.id"
></div>```
over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

As you can see in following snippet your code working fine, don't use this in template:

new Vue({
  el: '#demo',
  data() {
    return {
      res: '1',
      item: {id: 1}
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
.plan__part_1{
  background: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">     
  <div :class="{[`plan__part_${res}`]: true }" :key="item.id">
    {{ res }}
  </div>
</div>

over 4 years ago · Santiago Trujillo Report

0

For this case if your current implementation is not working then you can try using computed

v-bind:class="getClass"
:key="item.id"
></div>

and in

computed: {
 getClass() { 
  if(this.flag) return `plan__part_${this.res}`;
  return '';
 }

Note: this.flag is actually the boolean that you have used in the template

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!