Vue3, composite api, script setup, how to v-for data from script side?

Hello Mika,

To access the interval value for each banner within your startBanner function, you need to know which banner's interval you're referring to. Since startBanner seems to be a function that starts the interval for a specific banner, you should pass the current banner's index or the banner object itself to the function.

Here's how you can modify your code to achieve this:

<template>
  <div v-for="banner, index in banners" :key="banner.id" :iscurrent="currentBanner === index">
    <div v-show="currentBanner === index">
      <p> {{ banner.interval }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Assuming banners is an array of objects and each object has an 'interval' property
const banners = ref([
  // ... your banner objects here
]);

const currentBanner = ref(0);
const interval = ref(null);

const startBanner = (banner) => {
  clearTimeout(interval.value);
  interval.value = setTimeout(() => {
    changeBanner();
    // Do something with banner.interval here
  }, banner.interval);
};

// You would need to define your changeBanner function here
const changeBanner = () => {
  // Logic to change the banner
};
</script>

In the above code, I've made the following changes:

1. I've assumed banners is an array of objects where each object has an interval property.
2. The startBanner function now takes a banner parameter, which is the banner object you want to start the interval for.
3. When setting the timeout, I've used banner.interval to dynamically set the interval duration based on the banner's interval value.

Make sure to call startBanner with the correct banner object when you want to start the interval. For example, you might call it when a banner is clicked or when the component is mounted, depending on your use case.

Remember to define your changeBanner function to handle the logic for changing the banner when the timeout completes.