Как добавить смещение в цикле v-for в html с помощью vue - PullRequest
Новая
       13

Как добавить смещение в цикле v-for в html с помощью vue

0 голосов
/ 08 января 2019

Так что проблема у меня в функции v-for vue. Я хотел бы иметь возможность добавить смещение к числу, которое затем добавляется в таблицу, которую я создаю. Я чувствую, что, возможно, я просто иду в неправильном направлении с этой проблемой.

HTML-код для раздела таблицы: 

<tbody>
   <tr v-for="n in parseInt(recordCount)">
      <td class="idNum">
         {{ n }}
      </td>
      <td v-for="select in controlArray">
         <select v-model="selected[n][select][n]">
            <option v-for="option in options" v-bind:value="option.value">
               {{ option.text }}
            </option>
         </select>
      </td>
      <td v-for="input in controlArray">
         <input type="text" class="form-control" v-model="valueArray[n][input][n]" />
      </td>
   </tr>
</tbody>

Конкретная проблема заключается в том, где я создаю v-for="n in parseInt(recordCount)". Переменная n не инициализируется, а переменная recordCount - это число, которое может выбрать пользователь.

Я бы хотел добавить смещение к передней части числа, чтобы вместо итерации с 0 он мог начинаться с большего числа.

Как я уже говорил, я чувствую, что могу пойти в неправильном направлении с этим, если кто-то может отправить мне правильный путь, я был бы благодарен.

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Конструкция, подобная v-for="n in 10", является специальной конструкцией Range, она будет повторяться 10 раз, начиная с n=1 и заканчивая n=10.

Если вы хотите перебрать пользовательский диапазон, вы можете просто вызвать метод для его генерации: 

new Vue({
  el: "#app",
  data: {
    recordCount: 10,
  },
  methods: {
    createRange(startFrom, endWith) {
      const r = [];
      for(let i = startFrom; i <= endWith; i++) {
        r.push(i);
      }
      return r;
    }
  }
})
#app { padding: 10px; }
ul { list-style: none; padding: 0; }
li { margin: 4px 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label>Record Count: <input v-model="recordCount"/></label>
  <ul>
    <li v-for="n in createRange(5, recordCount)">
      {{ n }}
    </li>
  </ul>
</div>
0 голосов
/ 08 января 2019

Для не слишком больших смещений вы можете указать v-if рядом с v-for: 

<tbody>
   <tr v-for="n in (parseInt(recordCount) + offset)" v-if="n > offset">
      <td class="idNum">
         {{ n }}
      </td>

      <!-- rest of your HTML -->

   </tr>
</tbody>
...