Horizontal scrolling for dynamic list

I need to scroll horizontally inside a lengthy list. It was possible when the list is statically implement as below.

 <div style="margin-top:100px;white-space: nowrap;">
  <ul >
    <li style="display:inline">wfwe1</li>
    <li style="display:inline">wfwe2</li>
    <li style="display:inline">wfwe3</li>
    <li style="display:inline">wfwe4</li>
    <li style="display:inline">wfwe5</li>
    <li style="display:inline">wfwe6</li>
    <li style="display:inline">wfwe7</li>
     <li style="display:inline">wfwe1</li>
    <li style="display:inline">wfwe2</li>
    <li style="display:inline">wfwe3</li>
    <li style="display:inline">wfwe4</li>
    <li style="display:inline">wfwe5</li>
    <li style="display:inline">wfwe6</li>
    <li style="display:inline">wfwe7</li>
  </ul>
 </div>

But if we fetch the list via a loop it will not display inline even. So horizontal scrolling is not possible. My attempt is as below.

 <div
  style="margin-top:100px;white-space: nowrap;">
  <ul
    v-for="(infoChildBtn, index) in infoSubContracts"
    :key="index"
    @click="infoTopBtnFun1(index, infoChildBtn)">
    <li style="display:inline">
      {{ infoChildBtn }}
    </li>
  </ul>
</div>

Where I was get wrong and how to resolve this?

Answer

The difference between your static example and your Vue example is, you are using v-for on the ul element. Therefore you will end up having something like this :

  <ul>
    <li style="display:inline">wfwe1</li>
  </ul>
  <ul>
    <li style="display:inline">wfwe2</li>
  </ul>
  <ul>
    <li style="display:inline">wfwe3</li>
  </ul>
  <ul>
    <li style="display:inline">wfwe4</li>
  </ul>

Try changing your vue template to

<div style="margin-top:100px;white-space: nowrap;">
  <ul>
    <li
      style="display:inline"
      v-for="(infoChildBtn, index) in infoSubContracts"
      :key="index"
      @click="infoTopBtnFun1(index, infoChildBtn)">
      {{ infoChildBtn }}
    </li>
  </ul>
</div>

so you actually loop the li tag, not the ul tag.

Advertisement

Answer