How to use variables dynamically in vue

Question

How to use variables dynamically in vue

Navigation

#1 by (1 votes)

0

I would like to know how to use propriedade of a Objeto in the component concatenate with string and become the name of the class in v-for

My object:

data(){
    return{
        user: {name:""}
    }
}

I would like my class to have the name pencilName

<div v-for="(value, propertyName) in user">
     <div class="'pencil'+propertyName[0].toUpperCase() + propertyName.slice(1)" >
         <strong>{{propertyName}}</strong>
     </div>
</div>

I would like the result to be this:

<div>
     <div class="pencilName" >
         <strong>Name</strong>
     </div>
</div>

vue.js vue.js-2

asked by anonymous 13.03.2018 / 21:48

1 answer

Error when separating arrays in PHP Several CRUDs in the same PHP project

score 1 · Accepted Answer

To achieve exactly the result you want, by using the code, you just have to put the :class or v-bind:class that will work. Follow below:

<div v-for="(value, propertyName) in user">
    <div :class="'pencil'+propertyName[0].toUpperCase() +  propertyName.slice(1)" >
        <strong>{{propertyName}}</strong>
    </div>
</div>