I try to change number to variable in vue3 template but it cause error but if i put num ber it is ok

Question

This code is work when I change {{num_bottom}} to 5 but I prefer to use variable please suggest why it is not correct and how to fix it I use vue3

<template>

            <tr class="row" v-for="rowIdx in Math.ceil(items.length / {{num_bottom}})">

</template>

  <script  setup>   
   const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
   let num_bottom = 5    
  </script>

if I change {{num_bottom}} to number such as 3 it is work I want to use variable so I can change it one place and it effect to all

Answer 1

They way you have written it num_bottom is being treated as a string instead of a variable.

To fix your mistake remove the curly braces around num_bottom . Make sure num_bottom is inside the templates scope, you can do that by declaring it in the setup function.

<template>
  <tr class="row" v-for="rowIdx in Math.ceil(items.length / num_bottom)">
</template>

<script>
  export default {
    setup() {
      const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      const num_bottom = ref(5)
      
      return {
        items,
        num_bottom
      }
    }
  }
</script>