Binding Styles in Vue.js

Question

New to Vue.js 2. I am trying to give each div their own unique style in a v-for loop. What am I doing wrong? What is a better way to accomplish what i'm trying to do?

var tables = new Vue({
  el: '#table',
  data: {
    tables: [
   {name: 'iPhone', left:1, top:0},
      {name: 'Mac', left:150, top:0}
   ]
  }
})

.table-div
{
  width:100px;
  height: 100px;
  border:1px solid black;
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="table">
    <div v-for="table in tables">
      <div class="table-div" v-bind:style="{top: table.top, left: table.left}">{{table.name}}</div>
    </div>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>

choasia · Accepted Answer · 2017-08-10 04:17:33Z

1

I think you just forgot to add 'px'. See demo below.

var tables = new Vue({
  el: '#table',
  data: {
    tables: [
   {name: 'iPhone', left:1, top:0},
      {name: 'Mac', left:150, top:0}
   ]
  }
})

.table-div
{
  width:100px;
  height: 100px;
  border:1px solid black;
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="table">
    <div v-for="table in tables">
      <div class="table-div" v-bind:style="{top: table.top + 'px', left: table.left + 'px'}">{{table.name}}</div>
    </div>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>

answered Aug 10, 2017 at 4:17

choasia

10.9k6 gold badges42 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Binding Styles in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related