How can I pass the index of a v-for loop as an argument to a click handler without it returning undefined?
<div v-for="(item, key, index) in groups" v-on:click="selected(index)">{{item.name}}</div>
Here's my Handler:
selected(i) {
console.log("you clicked " + i) // but this logs "you clicked undefined"
}
It appears that your code is currently structured for objects instead of arrays. Please update your v-for directive to the following:
<div v-for="(item, index) in groups" v-on:click="selected(index)">{{item.name}}</div>
Using the code snippet below, I am attempting to retrieve all details related to user data where the checked value is either 1 or 0. I have noticed that 'WHERE flight.checked IN check' does not seem to be properly working. Is it appropriate to u ...
I've been working on implementing the CASL permissions system into my VueJS 2 project. Everything seems to be working fine, but I have encountered an issue when intentionally refreshing the page (like pressing F5). After the refresh, all can() functio ...
I am currently working on implementing a feature that will allow a gallery to open when a thumbnail is clicked. At the moment, the code I have looks like this: <div class="row"> <div class="col-lg-12"> <h1 class="page-h ...
A 2-dimensional array is created from a string called matrix: 131 673 234 103 018 201 096 342 965 150 630 803 746 422 111 537 699 497 121 956 805 732 524 037 331 After parsing, it becomes an array of arrays like this: [ [131, 673, 234, 103, 018], [2 ...
Is it possible to verify that a function passed in mapStateToProps was successfully called with RTL, even when there are no visible changes in the user interface? ...
Greetings, I am currently working on developing a table to monitor the validation status of multiple items. Below is the VueX store configuration: mutations: { ..., set_scaninfos: function (state, scaninfos) { Vue.set(state, 'scaninfos&a ...
Two input buttons are available for users to upload files. <input type="file" id="fileUpload" name="files" multiple><br/> <div id="selectedFiles"></div> The selected files will be appende ...
Upon receiving a Vue component in the following format: <template> <div> <div>other things...</div> <FilterPopUp ref="filterPopUp"> <FilterInput ref="filterInput"/> </FilterPopU ...
I have a search box that filters results displayed on the screen. I am using a filter called 'startWith' for this purpose. Now, I need to implement a feature where the search text is highlighted among the search results in angularJS. For example ...
Currently, I am utilizing the component provided by material-ui, which can be found at material-ui. <Fade in={!randomizeFlag}> <Grid> <FormControlLabel control={<Switch onChange={this.handleStartValueFlag} & ...
When interacting with my Menu react component by clicking on the 'hamburger' icon that I created manually, the sidebar menu opens smoothly with an animation. However, the issue arises when trying to close the sidebar as it vanishes instantly with ...
<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...
Looking to extract all images from the imagePath array in the following JSON. While retrieving a single image works fine, encountering difficulties when trying to fetch the entire imagePath array. Any help with this issue would be greatly appreciated. Than ...
Utilizing Photo Swipe ( ) on my jQuery Mobile page. I aim to display a thumbnail view of the images upon loading. When clicking on a thumbnail, the user should be taken to a swipe-enabled gallery that takes up 30% of the screen height. Additionally, I wan ...
Is there a way to create a thumbnail that acts as a link and position the title next to the thumbnail? I have experimented with using 'after' and modifying the HTML structure to align them horizontally. Any ideas on how I can achieve this layou ...
I'm in the process of creating a one-page website to showcase COVID-19 cases in India. The base URL returns an array sorted alphabetically, but I want to sort it based on "totalConfirmed". Here's the code I have so far: <!DOCTYPE html> & ...
While browsing, I came across information suggesting that the :key attribute in Vue 3 is not always mandatory in a v-for loop. Could someone confirm if this is true? When exactly do we need to use a key in v-for loops and when can we skip it altogether? An ...
Having trouble figuring out what to insert in the last span element where it mentions "I_DO_NOT_KNOW", here is the markup provided: <div class="row"> <div class="key" translate>Label</div> <div class="value form-group"> < ...
I have been experimenting with express.Router to organize my routes and testing post requests using Postman. I noticed that when I make a post request to /test without using router body-parser, everything works fine and I can view the body content. However ...
How can I assign dynamic properties to a VueJS Component using VuetifyJS? Below is an example of VuetifyJS code that constructs a select field element: <div id="app"> <v-app id="inspire" style="padding: 10px; "> ...