CODEWITHSUNDEEP
javascripthtmlcssvue.js
Ryan H
Ryan H

Reputation: 2945

Vue JS use index to build gap between elements

In my Vue JS project, I'm looping over some data and am outputting it to the page, however, I'm struggling to get the right gap between my elements using the index of an array item.

I need my elements to be evenly distributed at 5px apart, so it would go something like this:

I need to use the index because this is the only way that I can really space them apart, but at the moment whenever I try to use JS addition such as index + .5 I end up with an odd result such as 1.5.025 rather than (for instance) 15.25, what am I missing?

<div class="uptime-timeline-wrapper" data-uptime-graph--wrapper>
  <svg height="30" version="1.1" :viewBox="`0 0 ${uptimeTimelineWidth} 30`" xmlns="http://www.w3.org/2000/svg" class="uptime-timeline">
    <rect
      v-for="(uptime, key, index) in monitor.charts.uptime.timeline"
      :key="index"
      v-b-tooltip.hover.top.html
      :title="`<div class='text-muted small'>${index+1} ${$moment.tz($moment(key), $auth.user.timezone).format('MMM Do, HH:mm')}</div>${uptime.uptime}`"
      aria-expanded="false"
      :fill="uptime.fill"
      fill-opacity="1"
      height="30"
      width="10"
      rx="3"
      ry="3"
      v-bind:x="`${index == 0 ? '0' : `${(index * 2)}0.25`}`"
      y="0">
    </rect>
  </svg>
</div>

I need to modify v-bind:x="${index == 0 ? '0' : ${(index * 2)}0.25}" somehow.

Desired outcome:

<svg>
  <rect x="0"></rect>
  <rect x="15"></rect>
  <rect x="30"></rect>
  <rect x="45"></rect>
  <rect x="60"></rect>
  // etc
</svg>

Upvotes: 0

Views: 488

Answers (1)

T J
T J

Reputation: 43156

According to the comments,

First element needs x="0", second x="15", x="30", x="45" etc

I believe your calculation should simply be:

v-bind:x="index * 15"

This should generate 0, 15, 30, 45, and so on...

Upvotes: 2

Related Questions