CODEWITHSUNDEEP
vue.js
Alex
Alex

Reputation: 375

Inline style in vue

I try:

<a v-for='(item, index) in categories' :key='index'>
  <div class='slider-categories__slide' :style='{ background: item.background}'>
  </div>
</a>

Didn't work. Is it possible? If not, how i can add background for elements? (different background for items)

Upvotes: 1

Views: 2776

Answers (1)

hamid niakan
hamid niakan

Reputation: 2861

you can have an object named for example style in each object in the array, in each style object you can have specific style for that object and bind that to the style attribute on the element like :style="item.style".

also if you can't have a dedicated object for the styles in you array's objects you can use the data that you have to construct the appropriate object binding in the v-for, just pay attention to the correct formatting.

check the demo below: (here I used destructuring in v-for but its not necessary)

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    items: [{
        id: 1,
        style: {
          background: 'blue'
        }
      },
      {
        id: 2,
        style: {
          background: "url('https://picsum.photos/id/1025/200')",
          backgroundSize: 'contain'
        }
      },
      {
        id: 3,
        style: {
          background: "linear-gradient(#e66465, #9198e5)"
        },
      },
    ]
  },
})
.items {
  height: 100px;
  width: 100px;
  display: inline-block;
  border: 2px solid red;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <div class="items" v-for="{id, style} in items" :key="id" :style="style"></div>
</div>

Upvotes: 1

Related Questions