accessing elements in a loop in vuejs

Question

accessing elements in a loop in vuejs

I am trying to create a rating system using Vue.js and the v-for directive. Here is the code I have:

<div class="rating-container">
    <input type="radio" name="star" value="5" id="star-5">
    <label class="star-radio" for="star-5">5</label>
    <input type="radio" name="star" value="4" id="star-4">
    <label class="star-radio" for="star-4">4</label>
    <input type="radio" name="star" value="3" id="star-3">
    <label class="star-radio" for="star-3">3</label>
    <input type="radio" name="star" value="2" id="star-2">
    <label class="star-radio" for="star-2">2</label>
    <input type="radio" name="star" value="1" id="star-1">
    <label class="star-radio" for="star-1">1</label>
</div>

However, I want to use v-for to generate these elements in order, with each label following its respective input. Is there a way to achieve this while preserving the element order using Vue.js?

vue.js v-for

Answer 1

Answer №1

To utilize the template tag, follow these steps:

The template element stores HTML code without displaying it

<div id="app">
<div class="rating-container" >
  <template v-for="n in 5">
    <input type="radio" name="star" :value="n" :id="'star-'+ n">
    <label class="star-radio" :for="'star-'+ n">{{n}}</label>
  </template>
</template>
</div>

If you need to iterate through items in reverse order, manual handling is necessary.

Answer 2

To utilize the template tag, follow these steps:

The template element stores HTML code without displaying it

<div id="app">
<div class="rating-container" >
  <template v-for="n in 5">
    <input type="radio" name="star" :value="n" :id="'star-'+ n">
    <label class="star-radio" :for="'star-'+ n">{{n}}</label>
  </template>
</template>
</div>

If you need to iterate through items in reverse order, manual handling is necessary.

accessing elements in a loop in vuejs

Answer №1

Similar questions

get an array of JSON data from a VueJS fetch or axios.get request

Removing items from a list in a Vue.js application

Encountering issues during the automated creation of a Nuxt.js application using an Express server

Leveraging the source of an image from asset variables

Utilizing Vue CLI and Vuetify to implement the local Roboto font in your project

Having difficulty handling file data following the import of an Excel file in Laravel 5.8

Is there a way to disable a row using ag-grid components?

The Vue-cli Webpack template is experiencing issues with correctly serving static fonts

refresh the localstorage array using vanilla JavaScript

Personalized message on Vuetify slider

What are the steps to integrate MaterializeCss into Vue.js?

What could be causing the sluggish performance of my wysiwyg editor in Vue.js?

Could this be a Vue.js memory leakage issue?

Issue with integrating external components in Nuxt framework

What are some creative ways to design the selected tab?

Is it possible to eliminate the arrows from an input type while restricting the change to a specific component?

Vue: Displayed list displaying checked checkboxes

Exploring the world of computed properties in Vue.js

Encountered a SyntaxError while deploying Nuxt.js SSR on Passenger: The import statement cannot be used outside a module

Issue with method assignment in extending Array class in Typescript