title: Is there a way to make a multi-dimensional array object side-by-side with certain rules?
body: <p>In the loop of the map function, I want to get the top and left values of the CSS position and output another value in the array as per the position in the Vue.js for statement, but I can't get the top value as expected.</p>
  <p><strong>Expected results</strong></p>
  <p>I want to align the CSS top.</p>
  <p><a href="https://i.stack.imgur.com/FCiBH.png" rel="nofollow noreferrer">expected result img </a></p>
  <p><strong>Current status</strong></p>
  <p><a href="https://i.stack.imgur.com/w87V6.png" rel="nofollow noreferrer">current status img </a></p>
  <p>because the top is generated each time it is looped.</p>
  <p>In order to create top and left, we loop through the array object using the map function. I would like to get the value of top each time I loop, but since it is currently a constant value, how can I get the value of top for each task_code?</p>
  <p>Here is the code.</p>
  <pre class="lang-js prettyprint-override"><code>// data.js
  
  export default
  [
      [ // user_id:1 start
          [
              {
                  input_time: 8,
                  user_id: 1,
                  task_code: &quot;100&quot;,
                  daily_day: &quot;2021-02-01&quot;
              },
              {
                  input_time: 8,
                  user_id: 1,
                  task_code: &quot;100&quot;,
                  daily_day: &quot;2021-02-02&quot;
              },
              {
                  input_time: 8,
                  user_id: 1,
                  task_code: &quot;100&quot;,
                  daily_day: &quot;2021-02-08&quot;
              }
          ],
          [
              {
                  input_time: 8,
                  user_id: 1,
                  task_code: &quot;101&quot;,
                  daily_day: &quot;2021-02-03&quot;
              }
          ]
      ],// user_id:1 end
      [ // user_id:2 start
          [
              {
                  input_time: 5,
                  user_id: 2,
                  task_code: &quot;105&quot;,
                  daily_day: &quot;2021-02-01&quot;
              },
              {
                  input_time: 8.5,
                  user_id: 2,
                  task_code: &quot;105&quot;,
                  daily_day: &quot;2021-02-02&quot;
              },
          ],
          [
              {
                  input_time: 0.5,
                  user_id: 2,
                  task_code: &quot;100&quot;,
                  daily_day: &quot;2021-02-01&quot;
              },
              {
                  input_time: 3.5,
                  user_id: 2,
                  task_code: &quot;100&quot;,
                  daily_day: &quot;2021-02-04&quot;
              }
          ],
          [
              {
                  input_time: 1,
                  user_id: 2,
                  task_code: &quot;103&quot;,
                  daily_day: &quot;2021-02-01&quot;
              }
          ]
      ]
  ]
  
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>Vue.js
  
  &lt;template&gt;
    &lt;div&gt;
        &lt;div class=&quot;p_hello&quot;&gt;
            &lt;div v-for=&quot;(d, index) in fn&quot; :key=&quot;`first-${index}`&quot; class=&quot;first&quot;&gt;
                &lt;div v-for=&quot;(i, index) in d&quot; :key=&quot;`second-${index}`&quot; class=&quot;second&quot;&gt;
                    &lt;div v-for=&quot;(j, index) in i&quot; :key=&quot;`third-${index}`&quot;&gt;
                        &lt;div class=&quot;third&quot; :style=&quot;j.style&quot; :class=&quot;inputColor(j.item.input_time)&quot;&gt;
                            {{j.item.input_time}}
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import moment from 'moment'
  import data from '../assets/api/data'
  // console.log('data', data)
  
  export default {
      data () {
          return {
              data,
              date: '2021-02-01',
              size: 30
          }
      },
      computed : {
          fn () {
              const start = moment(this.date)
              let top = 20
              let style
              return this.data.map(value =&gt; {
                  return value.map(value =&gt; {
                      return value.map(item =&gt; {
                          const from = moment(item.daily_day)
                          let diff = from.diff(start, 'days')
                          let left = diff * this.size
                          style = {
                              top: `${top}px`,
                              left: `${left}px`,
                              color: 'black'
                          }
                          top = top + 40
  
                          return {
                              style,
                              item
                          }
                      })
                  })
              })
          }
      },
      methods: {
          inputColor(input) {
              if (input &gt; 7) {
                  return 'green'
              }
              if (input &lt; 4) {
                  return 'red'
              }
          }
      }
  }
  &lt;/script&gt;
  
  
  &lt;style&gt;
      .first {
          position: relative;
          display:flex;
      }
       .second {
          position: relative;
          display: flex;
  
          background-color:azure;
  
      }
  
      .third {
          position: absolute;
          font-size: 20px;
      }
      .green {
          background: rgb(153, 235, 210);
      }
      .red {
          background: rgb(236, 81, 127);
      }
  &lt;/style&gt;
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/4w4fY.png" rel="nofollow noreferrer">coding picture</a></p>