[Vuejs]-Vue.js: v-for behaves different with template literals

by

0👍

✅

They are not the same. In the first one, you are using v-for on a string. In which case, vue will loop through the characters and display each of them in a li. In the second one, it’s an integer. In which case, vue will use the range mechanism

new Vue({
  el: "#app",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <p>Result with template literal</p>
  <ul>
   <!--Displays 1, 0, 0-->
    <li
      v-for="pages in `100`" 
      :key="pages"
    >
      <p>{{pages}}</p>
    </li>
  </ul>
  
  <p>Result with straight number</p>
  <ul>
    <li
      v-for="pages in 4" 
      :key="pages"
    >
      <p>{{pages}}</p>
    </li>
  </ul>
  
</div>

Leave a comment