CODEWITHSUNDEEP
cssvue.jstemplatesvuejs3
user504909
user504909

Reputation: 9549

How to bind dynamically a style property in Vue.js 3?

I just using vue3 and want to apply dynamic style. my vue3 template like:

<ul>
  <li v-for="(question, q_index) in questions" :key="q_index" v-show="question.visible" :style="{padding-left: `question.level`rem}">
    <Question :title="question.title" :options="question.options" :name="question.id" :visible="question.visible" @opUpdate="opHandle"/>
  </li>  
</ul>

there is error on my template for '-'

Uncaught SyntaxError: Unexpected token '-'

How to set dynamic padding left css style in vue3 template?

Upvotes: 2

Views: 2947

Answers (2)

Matt
Matt

Reputation: 10312

It would suffice to remove the hyphen and use a template literal:

<ul>
    <li
      v-for="(question, i) in questions"
      :key="i" v-show="question.visible"
      :style="{ paddingLeft: `${question.level}rem` }"
    >
        <Question
          @opUpdate="opHandle"
          :title="question.title"
          :options="question.options"
          :name="question.id"
          :visible="question.visible"
        />
    </li>
</ul>

Additional: you can also use v-bind to pass object items to props that have the same name.

<Question
  @opUpdate="opHandle"
  v-bind="question"  // takes care of `title`, `options` and `visible`
  :name="question.id"
/>

Upvotes: 5

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should wrap that property by quotes '' :

:style="{'padding-left': `question.level`rem}">

Upvotes: 1

Related Questions