Looking to pass the `Item Index` to functions within v-list-item-action in Vuetify?

Is there a way to pass the item index as a parameter to the function within the v-list-item-action element? Thank you in advance!

<v-list-item
  v-for="(layer, i) in layers"
  :key="i">
<template v-slot="{ item, index }">
<v-list-item-action>
  <v-btn 
    @click="changeVisible(index)"
    icon>
    <v-icon
      color="blue darken-2"
      v-if="layer.show">
      mdi-eye
    </v-icon>
    <v-icon
      v-else>
      mdi-eye-off
    </v-icon>
  </v-btn>
</v-list-item-action>
<v-list-item-title v-text="layer.name"></v-list-item-title>
<v-list-item-action>
  <v-btn
    @click="changeEdit" 
    icon>
      <v-icon
        color="blue darken-2"
        v-if="layer.edit">
        mdi-pencil
      </v-icon>
      <v-icon
        v-else>
        mdi-pencil
      </v-icon>
  </v-btn>
</v-list-item-action>
</template>
</v-list-item>

Answer №1

To dynamically include slot content, you can utilize the index from the v-for loop as a method parameter. Avoid defining a template for this purpose.

<v-list-item
  v-for="(layer, i) in layers"
  :key="i">
  <v-list-item-action>
   <v-btn 
     @click="changeVisible(i)"
     icon>
     <v-icon
       color="blue darken-2"
      v-if="layer.show">
      mdi-eye
    </v-icon>
    <v-icon
      v-else>
      mdi-eye-off
    </v-icon>
  </v-btn>
</v-list-item-action>
...

Answer №2

If you want to add an event-listener to the "v-list-item-action", you can do so by using the following code: document.getElementById("v-list-item-action").addEventListener(event, function);

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

Storing data in Angular service for future use

My ui-grid is functioning correctly, utilizing server side pagination with a view button to display row details on a separate page. However, upon returning to the grid after viewing details, it defaults back to displaying the first page. I would like it to ...

Retrieve the data stored in a selection of checkbox fields on a form

I have a table of checkboxes: <div> <h1 class="text-center">Select activities</h1> <div class="row"> <div class="col"></div> <div class="col-md-8 col-lg-8"> <h3>Link activ ...

Angular: Leveraging Nested Callbacks for Efficient HTTP Queries

I'm currently facing an issue with structured English. GET HTTP Resource FOR every data item received do GET another HTTP Resource Alter the original data from the outer loop with data from the inner GET RETURN altered data How can ...

Transfer a csv file from a static webpage to an S3 bucket

Looking to create a webpage for uploading csv files to an S3 bucket? I recently followed a tutorial on the AWS website that might be helpful. Check it out here. I made some modifications to accept filename parameters in my method, and everything seems to ...

Passing two variables through a Javascript URL to dynamically update a dropdown menu based on the specified values

What is the best way to send two variables to a JavaScript function in order to modify the dropdown list according to those values? $(document).ready(function() { $("#date").change(function() { $(this).after('<div id="loader">& ...

Exploring Vue Slots: A guide to parsing and rendering slot components

Currently facing a challenge while developing a web page using Vue, specifically with parsing and rendering the child components inside the <slot>. I need to extract the slot content, convert it into an array of components, and display these compo ...

Cannot access the get_workbook property of null in Tableau Vuejs when calling getWorkBook()

I have been attempting to implement the getData example from the Tableau JavaScript tutorial for Vue.js, following the guidance provided at the link (https://github.com/tableau/js-api-samples/blob/master/getDataBasic.html). However, I am encountering diffi ...

What sets apart elem['textContent'] from elem.textContent?

When dealing with a HTMLElement in JavaScript, is there any distinction between the following lines of code: elem['textContent'] = "Test"; versus elem.textContent = "Test"; This question arises when setting the text content of an HTMLElement. ...

Issue encountered while submitting form on JQuery Mobile framework

Currently, I am in the process of developing a small web application utilizing JQuery Mobile and Multi Page architecture. The issue arises on my form as the second page. Upon clicking the submit button, an error message is displayed on my console (error i ...

The application of textures in Three.js models is not working correctly on the entire object

I am encountering an issue with applying textures on both the top and bottom faces of a surfboard obj file. The texture seems to split in the middle instead of being applied seamlessly across the face, and it also gets applied on the inside of the mesh. I ...

exchange the class using only JavaScript

I need help with a code snippet that allows for swapping classes using a loop. The objective is to click on the brown square causing it to move to the position of the blue square, while the blue square moves to the previous position of the brown square. T ...

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

Transforming JSON data from a Javascript object into Ruby

When I send an object from Javascript to a Sinatra POST route, I use the 'stringify' method to convert the JS object to JSON. The JSON that is being sent looks like this (based on the Chrome developer tools): {"a":1,"b":2,"c":"3"}: In my Sinatr ...

Deconstructing arrays in the req.body object in a Node.js Express application

Received an array in the request body as follows: [ { "month" : "JUL", "year" :"2018" }, { "month" : "JAN", "year" :"2018" }, { "month" : "MAR", "year" :"2018" } ] This array consists of two parameters (month:enum and year:string). ...

Tips for Developing Drag Attribute Directive in Angular 2.0

Currently, I am referencing the Angular documentation to create an attribute directive for drag functionality. However, it seems that the ondrag event is not functioning as expected. Interestingly, the mouseenter and mouseleave events are working fine ac ...

Delete one object and then sequentially rename all remaining objects

object This is the object I retrieved. How can I remove module_1 object and rename the module object? For example, remove module_1 and rename module_2, module_3... to module_1, module_2... `{ "module_1": { "modulename": "mat ...

Is there anyone available to assist me with this contact validation form?

I'm struggling to make this contact form highlight red and display 'not valid' inside the boxes. Despite my efforts, I just can't seem to get it to work! I'm unable to change the existing HTML tags, but I can add to the HTML. I wan ...

Troubleshooting Problem with Parsing Float in Angular

Currently, I am facing an issue while using a filter to calculate totals from dynamic data in ng-repeat. The problem lies in my inability to limit the decimals to 2 places. Below is the code snippet of my filter: app.filter('sumByKey', function( ...

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

Guide on Applying a Dynamic Color in VueJs 3 Composition API/Vuetify Using CSS

Currently, my project utilizes Vue 3 with the composition API and Vuetify for the UI. I am looking to utilize a color that is already defined in a Vuetify theme variable within my CSS, similar to how I have done it previously in JavaScript. Although I at ...