Возьмите значение v-модели и создайте цикл с v-for

Question

У меня есть поле ввода. Это поле содержит номер. Я хочу взять этот номер и использовать этот номер для цикла.

В моем примере в поле ввода число 5, и я хочу написать li пять раз. Ок, это работа! Но когда я изменяю число на 10, просто пишем 10, оно больше не внутри цикла и не показывается 10 раз циклом li.

Как мне показать динамически значение v-модели с помощью v-for?

var app = new Vue({
  el:'#app',
  data: {
    uTopX: 5,
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <tr>
      <td>
        <label for="uTopX">Top X</label>
      </td>
      <td>
        <input id="uTopX" v-model="uTopX" type="number">
      </td>
    </tr>
  </table>


  <ul>
    <li v-for="n in uTopX">
      {{n}}
    </li>
  </ul>
</div>

Answer 1

Проблема в том, что v-model возвращает все, что вы вводите как строку.

с использованием v-model.number - самое простое решение.

var app = new Vue({
  el:'#app',
  data: {
      uTopX: 5,
  }

});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <tr>
      <td>
        <label for="uTopX">Top X</label>
      </td>
      <td>
        <input id="uTopX" v-model.number="uTopX" type="number">
      </td>
    </tr>
  </table>


  <ul>
    <li v-for="n in uTopX">
      {{n}}
    </li>
  </ul>
</div>