What is the method to retrieve the current index of an item in v-carousel?

My current code successfully cycles a carousel, but I would like to display the item title underneath the image instead of on top. I believe creating a new data value that updates with each change in the carousel is the solution. However, I am struggling to implement this feature.

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in servicesCarouselItems"
    :key="i"
    :src="item.src"
  >

  </v-carousel-item>
</v-carousel>
<v-card-title class="justify-center">{{currentTitle}}</v-card-title>


<script>
export default {
  data: () => ({
      currentTitle: '',
      servicesCarouselItems: [
        {
          name: "Title1",
          src: require('../../1.jpeg'),
        },
        {
          name: "Title2",
          src: require('../../2.jpeg'),
        },
        {
          name: "Title3",
          src: require('../../3.jpeg'),
        }
      ],
  })
}
</script>
javascriptvue.jsvuejs2vuetify.js

Answer №1

One efficient approach is to utilize the v-model feature, which exposes the index of the current item.

<v-carousel v-model="currentIndex">
  <v-carousel-item
    v-for="(item,i) in servicesCarouselItems"
    :key="i"
    :src="item.src"
  >

  </v-carousel-item>
</v-carousel>
<v-card-title class="justify-center">{{ currentTitle }}</v-card-title>

<script>
export default {
  data: () => ({
      currentIndex: 0,
      servicesCarouselItems: [
        {
          name: "Title1",
          src: require('../../1.jpeg'),
        },
        {
          name: "Title2",
          src: require('../../2.jpeg'),
        },
        {
          name: "Title3",
          src: require('../../3.jpeg'),
        }
      ],
  }),
  computed: {
    currentTitle() {
      return this.servicesCarouselItems[this.currentIndex].name
    }
  }
}
</script>

Answer №2

I was able to resolve this issue by utilizing the v-on:change / @change Vue event, demonstrated in the code snippet below.

<v-carousel @change="currentTitle = servicesCarouselItems[$event].name">
  <v-carousel-item
    v-for="(item,i) in servicesCarouselItems"
    :key="i"
    :src="item.src"
  >

  </v-carousel-item>
</v-carousel>

For more information, check out this resource for those interested:

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

Store the encoded data in a variable

After looking at some examples, I attempted to create my own solution but encountered an issue with the Promise being stuck in a "pending" state. My goal is to store base 64 data into a variable named base64. Can anyone offer guidance on what's wrong ...

javascriptreactjsbase64

What is the best way to modify the size of an SVG element within Vuetify?

Hi there, I'm currently a PHP developer who is delving into the world of Vue. I'm curious about how to adjust the height and width of an SVG image using the v-img tag. Below is the code snippet: <v-img src="/empty.svg" aspect-ratio="2">< ...

vue.jssvgvuetify.js

I'm facing a frustrating issue where using NodeJS with the Passport local strategy is resulting

I am experiencing a severe headache when attempting to log in using Passport. When I make a post request to /login with an email and password, Passport successfully authenticates it without any errors. However, the return res.redirect('/user') fu ...

javascriptnode.jsexpresspassport.js

SyntaxError: Unexpected token : error caused by an invalid label

When attempting to perform an ajax call, I receive a JSON object as a response: { id: 6, success: "true" } The ajax call in question is the following: window.foobar = function(foo){ $.ajax({ url: "http://foobar.com/sites/foo/", ...

javascriptjqueryajax

Difficulty obtaining elements in Internet Explorer, however works fine in Chrome and Firefox

My <textarea> is set up like this: <textarea class="form-control notetext" id="{{this._id}}-notetext" name="notetext">{{this.text}}</textarea> I am using ajax to send data and load a partial webpage. After loading the content, I attemp ...

javascriptjqueryinternet-explorer

Plugin for controlling volume with a reverse slider functionality

I have been customizing the range slider plugin found at to work vertically instead of horizontally for a volume control. I have successfully arranged it to position the fill and handle in the correct reverse order. For instance, if the value is set to 7 ...

javascriptjquery

Is there a way to trigger a server method when the user exits the page?

Is there a way to automatically remove a temporary file from the server when a user closes the page? I don't have access to a default server-side callback for this action. I attempted to call a server-side method using an implementation of ICallbackE ...

javascriptasp.netajaxcallback

The Tailwind CSS file has been generated without any variables included

While utilizing Tailwind with a PostCSS configuration that generates a CSS file for production, only the necessary CSS classes are included in the file. However, upon inspecting the CSS file, I came across numerous empty CSS variables that seem unnecessary ...

cssvue.jstailwind-csspostcsstailwind-3

How can I prevent a browser from allowing users to select an image tag?

I'm dealing with an issue on my webpage where I have an image that is inadvertently picking up mouse clicks, causing the browser to perform drag and drop actions or highlight the image when clicked. I really need to use the mousedown event for somethi ...

javascripthtmldom

Server-side rendering with the Node.js mustache template engine

I am in the process of developing a basic application for compiling mustache templates into static pages on the server side. This is what I have accomplished so far: var view = { title: "Joe", calc: function () { return 2+4; } }; v ...

javascriptnode.jsnpmmustache

useEffect does not trigger a rerender on the primary parent component

I am facing an issue where the main parent component does not re-render when I change the state 'click button' in another component while using useEffect. Oddly enough, the main <App /> component only re-renders properly when I reload the p ...

javascriptreactjstypescriptreact-hooks

Authentication failed due to Bcrypt.compare() returning invalid credentials

const express = require('express'); const router = express.Router(); const auth = require('../../middleware/auth'); const bcrypt = require('bcryptjs'); const jwt = require('jsonwebtoken'); const config = require(&apo ...

javascriptnode.jsmongoosebcrypt

Display different content based on the item selected in a listbox using headless UI and Vue.js

We are encountering an issue with the Listbox component from HeadlessUI. The problem is that we are unable to display content based on the selected option in the listbox. Here is the code for the listbox: <Listbox v-model="selectedElement"> ...

vue.jstailwind-cssheadless-ui

The AngularJS ng-if directive functions on a variable will only function on the

I'm currently working on updating an old codebase that was written in AngularJS, a framework I am not very familiar with. My task is to implement a spinner that appears when an HTTP request is sent and disappears once the response is received. The sp ...

javascriptangularjsangularjs-ng-if

Understanding the visibility scope in JavaScript's object-oriented programming

I have the following code snippet: function A() { this.AFunction = function() { var b = new B(); b.BFunction(); } } function B() { this.BFunction = function() { // some code $.ajax({ url: url suc ...

javascriptajaxoop

Adjust the size of icon passed as props in React

Below is the component I am working on: import ListItemButton from '@mui/material/ListItemButton'; import ListItemIcon from '@mui/material/ListItemIcon'; import Tooltip from '@mui/material/Tooltip'; const MenuItem = ({data, o ...

javascriptreactjsmaterial-ui

Struggling to fetch the last and first name from a document in Firestore using VueJs

https://i.sstatic.net/IdZGi.pngWhen trying to retrieve the last name and first name from a document stored upon signup with a field displayName, I encountered an issue. Despite having a common key as displayName, which should allow me to fetch this informa ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Steps for creating a two-dimensional arc

I want to input some pre-determined acr values from another program and replicate them in three.js Currently, I'm using code I found on this site to draw the arc, although it might not be the most optimal solution. function DRAWarc(){ ...

javascripthtmlthree.js

Using node-remote in Node.js application with NW.js

Does anyone have an example of how "node-remote" functions work when running certain logic from the server in an application? After adding "node-remote" : "hostip" to package.json, what should the server provide? Should it be a .js file with the functions ...

javascriptnode.jswebkit

Adjust the text within the paragraph dynamically according to the option chosen in the drop-down menu using

I'm having trouble updating a paragraph in a letter based on the user's selection from a dropdown menu. I can't seem to figure it out. I don't know whether ng-show/hide or ng-options is the best approach for this. I feel completely los ...

javascripthtmlangularjsng-options