How can I utilize a variable in a v-for loop as a label for a q-btn in Vue.js?

I have a list:

myList = [1, 2, 3, 4, 5, 6, 7, 8, 9]

I'd like to generate buttons using this list where the label corresponds to the number:

<q-btn v-for="number in myList" v-bind:key="number" color="primary" label="******" />

The goal is to assign each number as the button's label. This means I should end up with 9 buttons labeled from 1 to 9:

<q-btn color="primary" label="1" />
<q-btn color="primary" label="2" />
<q-btn color="primary" label="3" />
<q-btn color="primary" label="4" />
<q-btn color="primary" label="5" />
<q-btn color="primary" label="6" />
<q-btn color="primary" label="7" />
<q-btn color="primary" label="8" />
<q-btn color="primary" label="9" />

I'm new to this so any help would be appreciated. Thank you in advance!

Answer №1

If your collection consists of only numeric values, you have the option to directly loop through these numbers using the v-for directive and then assign each number to the label attribute:

<q-btn v-for="num in 10" :key="num" color="primary" :label="num" />

It's important to note that using :label="num" is a shortcut for v-bind:label="num"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for deploying a Vue.js - Express app on a local Ubuntu machine

Can anyone provide guidance on deploying a full stack Vue-Express application to a local Ubuntu server? I've been searching online but haven't found clear instructions. Any help would be greatly appreciated. ...

Troubleshooting Data Retrieval Issue on Page Refresh in Vue.js with Firebase

Currently working on developing a profile page for users. I have already created login and register pages, and integrated Firebase auth into the project. However, I am facing an issue where the user data is not displayed when the profile page is reloaded ...

Encountered a server issue (500 Internal Server Error) when attempting to send a POST

I have been working on a social media app project using React and MongoDB. However, every time I try to register a user, I encounter a POST error in the console. I have reviewed both my client-side and server-side code, but I am still unable to successfull ...

What is the best way to hide the input field when there are multiple parent classes present?

I am currently implementing dynamic fields with jQuery and everything is functioning correctly. The problem arises when I attempt to remove these fields. After searching on Google and browsing past questions on StackOverflow, I noticed that everyone seems ...

Mapping Service by Google - Navigate from your current location to desired destination

I have a script that currently displays a route for either car or transit depending on the user's selection. I am looking to adapt this script to set the origin as the user's current location and route from there to a set latitudes and longitudes ...

Can someone explain to me the meaning of "var vm = $scope.vm = {}" in AngularJS?

While reading through the angularJS api, I came across some code that looked like this: myApp.controller('MyController', ['$scope', function($scope) { var vm = $scope.vm = {name:'savo'}; } ]); Initially, this mul ...

Vue Loader: Multiple loaders for a single file extension

Currently, I'm experimenting with incorporating SVG into my vue-loader/webpack template project. I'm in need of loading different types of SVGs: Icons: these are utilized within my components and loaded using svg-inline loader for customizatio ...

Display text when hovered over or clicked to insert into an HTML table

I have an HTML table connected with a component field gameArray and I need it to: Show 'H' when the user's cursor hovers over TD (:hover) and the corresponding field in gameArray is an empty string, Fill the gameArray field after a click. ...

How to retrieve the index of a nested ng-repeat within another ng-repeat loop

On my page, there is an array containing nested arrays that are being displayed using ng-repeat twice. <div ng-repeat="chapter in chapters"> <div ng-repeat="page in chapter.pages"> <p>Title: {{page.title}}</p> </d ...

Simple way to automatically reload your script using an npm server

Testing out a sample javascript code snippet. Locating a script named simple.js in the demos directory. Executing the demo using the command yarn build-demos && http-server demos/ The script simple.js is compiled to simple_bundle.js and the serv ...

Click on the nearest Details element to reveal its content

Is there a way to create a button that can open the nearest details element (located above the button) without relying on an ID? I've experimented with different versions of the code below and scoured through various discussions, but I haven't be ...

Retrieve data from the component within anonymous middleware in NuxtJS

Is there a way to retrieve the component data (like infos, similarPosts shown in this example) from an anonymous middleware within a Nuxt.js application? ...

Utilize jQuery.ajaxComplete to identify the location of the AJAX request

I have an event: $(document).ajaxComplete that is functioning perfectly. Yet, I am looking to determine whether ajax took place at a particular spot within the document. Is there a method to identify which ajax call was made? $(document).ajaxComplete(fu ...

Error encountered while deploying to Heroku: cross-env not detected in Node.js application

As I attempt to deploy my project on Heroku, the following error persists despite all my efforts. Please assist me in resolving this issue: { "name": "storybooks", "version": "1.0.0", "des ...

JavaScript conversion of arrays to JSON data structures

Here is the code snippet along with the variable 'polygon': var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; var bermudaTriangle; var directionsPoints; var example; var rez; function initialize() { ...

Linking a Vue application within a PHP page using router hotlinking

Currently, I am in the process of developing a module for a CMS (Joomla) using VUE 3 with Router for the frontend. The prototype is functional and ready to be integrated into the CMS Module. The router is also working smoothly. However, when a user navigat ...

Tips for handling Google Spanner Date type in JavaScript

I am facing a challenge with Google Cloud Spanner as I work with multiple tables containing columns of type Date. While inserting entries with specified dates works fine, the issue arises when trying to retrieve these entries in the JavaScript frontend. Th ...

Swiper - tips for managing navigation visibility based on screen size in React

I have implemented a React Typescript swiper slider styled with tailwind CSS. The slider functions correctly, but I am facing an issue when trying to hide and show the navigation buttons on different breakpoints. Initially, I use the 'hidden' cla ...

JavaScript is always overlooked and goes unused

Can you figure out why the Javascript code isn't working? <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <script type="text/javascript"> function ChangeDisplay() { alert("Changing"); document ...

How to splice or add elements to an array using JavaScript function

Two buttons on my webpage are designed to add arrays to the orderArray. The arrays are then displayed as an HTML table, with each array having a corresponding button to remove it from the table. The removal process is working as intended, but after using . ...