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

The output of server.address() method in Node.js is ::

My memory serves me right, a few days back it was showing "localhost". I'm puzzled as to what altered server.address().address to now return double colons (::). According to my research, it seems to be returning an IPv6 address (::) because it's ...

The Material-ui Select component is experiencing issues with updating the state accurately

When creating a multiple select input using Material-UI, I encountered an issue with setting the default selected values from state. Despite having an array of two objects in the state and setting it as the select value, the default objects are not being ...

What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview. Compatible with Android 4.4 KitKat and Chrome version Not compatible with versions belo ...

Looking for assistance with a simple Javascript program

My program needs to have a for loop and utilize existing input functions (name and number). Additionally, I need to calculate totals. Users should be able to CANCEL and proceed to doc.write where they can enter their name and number. Furthermore, users s ...

Node for Angular forms workflow

I'm on the hunt for workflow nodes with forms that open when the user clicks on them. While I've come across a few options, not all of them are open source. Can you point me towards some open source (simple and basic) alternatives? Here's w ...

Web Audio API functions are encountering a playback issue on iOS 13.3, despite working smoothly on previous iOS versions

I have been developing an audio visualizer using the web audio API. It was functioning smoothly on PC, however, after upgrading to iOS 13.3, it no longer operates on Apple mobile devices. The root cause of this issue remains a mystery to me. The problem s ...

Encountering difficulties when attempting to store files using mongoose in a node express.js program

I encountered an error while attempting to save a document to the MongoDB using Mongoose in my Node Express.js project. Below is the code snippet: exports.storeJob = async (req, res, next) => { const { name, email, password, title, location, descri ...

Laravel Sanctum - Access Denied post login

My current project is a small web app developed using Laravel 8 sanctum and Vue. I have set up everything on both my local environment and the production server using Docker, ensuring consistency. The application is running smoothly on a subdomain called s ...

Blocking the space bar in JavaScript is a useful technique that can be

I'm in the process of developing an application and I'm looking to prevent the space bar from scrolling my page My framework of choice is VUE, and I am trying to trigger a method using an event handler However, when I attempt to call the ' ...

Error message "Error: listen EADDRINUSE" is reported by node.js when calling child_process.fork

Whenever the 'child_process.fork('./driver')' command is executed, an error occurs: Error: listen EADDRINUSE at exports._errnoException (util.js:746:11) at Agent.Server._listen2 (net.js:1156:14) at listen (net.js:1182:10) ...

Generating binary payload with Node-RED

Recently started with node-red and javascript. I am looking to establish a connection with a relay controller for status using the TCP input. I have configured a function node to create a two-byte request which will be sent through the TCP input node to th ...

Error Message: Execution Not Recognized and Missing Requirement

After going through numerous threads, I couldn't find a solution to my specific issue. It's quite unclear what I've installed or uninstalled, but I'm hoping that this error message and its details might provide some clarity. Even though ...

Mobile Chrome allows users to utilize the IFrame player API for enhanced video

Currently, I am working on creating a mobile website where I plan to include some YouTube videos using the IFrame player API (https://developers.google.com/youtube/iframe_api_reference). My main goal is to have the video start playing only after the user ...

Envelop a HTML element within another HTML element with the help of jQuery

Unique link Here is some sample HTML: <div><img src="http://i.imgur.com/4pB78ee.png"/></div> I am looking to use jQuery to wrap the img tag with an a tag, like this: $(function() { var a = '<a href="http://i.imgur.com/4pB78e ...

When you access the `selectedIndex` property in JavaScript, it will return an object of type `HTMLSelect

I am currently working on a piece of code that retrieves the value from dropdown list items and then displays it in the document. To proceed, please select a fruit and click the button: <select id="mySelect"> <option>Apple</option ...

What is the best way to save information from an ng-repeat loop into a variable before sending it to an API?

My goal is to store the selected value from ng-repeat in UI (user selection from dropdown) and assign it to a variable. function saveSelection() { console.log('inside function') var postToDatabase = []; vm.newApplicant.values ...

Using custom class instances or objects within Angular controllers is a simple process

Using three.js, I have created a class called threeDimView that houses my scene, camera, and other elements. In my JavaScript code, I instantiate a global object of this class named threeDimView_. threeDimView_ = new threeDimView(); Now, I wish to displa ...

Invoke the onload event from document.ready using jQuery

Is it possible to trigger the onload event from within jQuery's document.ready function, such as in the example below: $(function() { onloadfunc(param); }); Comparison: <body onload = "onloadfunc(param);"> Do the above two methods achieve th ...

Using a combination of functions to ensure synchronicity in JavaScript operations

Here is the function I have created: $scope.saveManualResendDraft = function(todo) { if ($scope.editMode) { updateStartJobManual(); byeSendManualInputDirectly(); } else { console.log('bye'); } }; I have defin ...

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

How can I pass a value to an anchor tag on every click using jQuery? I am encountering an issue with my current code where the value is not being retrieved when I click the button. //HTML snippet <button id="a-selectNm" data-a_name="<?php echo $row[ ...