A guide to implementing v-for with intervals in Quasar carousel components

I need help making my blog summary page more dynamic by using a q-carousel to display 3 blog posts per slide. I want to create an array with all the blog posts and loop through it with v-for to populate each slide dynamically while keeping the pagination linked. Any suggestions on how to achieve this grouping?

Here's a snippet of my code:

<template>
  <div class="skew-cc"></div>
  <div class="tw-bg-white tw-py-24 sm:tw-py-32">
    <div class="tw-mx-auto tw-max-w-7xl tw-px-6 lg:tw-px-8">
      <div class="service-block q-pa-lg text-center column no-wrap flex-center block-wrapper" id="Blog">
        <h2 class="text-h2 text-weight-bolder text-dark q-mb-xs">Useful Articles</h2>
        <h6 class="text-h6 text-weight-light text-dark q-my-none" style="max-width: 800px;">We hope to share some of our knowledge to help you make an informed decision!</h6>
      </div>
        <q-carousel
          v-model="slide"
          transition-prev="slide-right"
          transition-next="slide-left"
          animated
          control-color="primary"
          class="full-height full-width"
        >
          <q-carousel-slide name="1" class="column no-wrap flex-center">
            <div class="tw-mx-auto tw-mt-16 tw-grid tw-max-w-2xl tw-grid-cols-1 tw-gap-x-8 tw-gap-y-20 lg:tw-mx-0 lg:tw-max-w-none lg:tw-grid-cols-3">
              <article v-for="post in posts" :key="post.id" class="tw-flex tw-flex-col tw-items-start tw-justify-between">
                <div class="tw-relative tw-w-full">
                  <q-img :src="post.imageUrl" alt="" class="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]" />
                  <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10" />
                </div>
                <div class="tw-max-w-xl">
                  <div class="tw-mt-8 tw-flex tw-items-center tw-gap-x-4 tw-text-xs">
                    <time :datetime="post.datetime" class="tw-text-gray-500">{{ post.date }}</time>
                    <a :href="post.category.href" class="tw-relative tw-z-10 tw-rounded-full tw-bg-gray-50 tw-px-3 tw-py-1.5 tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100">{{ post.category.title }}</a>
                  </div>
                  <div class="tw-group tw-relative">
                    <h3 class="tw-mt-3 tw-text-lg tw-font-semibold tw-leading-6 tw-text-gray-900 group-hover:tw-text-gray-600">
                      <a :href="post.href">
                        <span class="tw-absolute tw-inset-0" />
                        {{ post.title }}
                      </a>
                    </h3>
                    <p class="tw-mt-5 tw-line-clamp-3 tw-text-sm tw-leading-6 tw-text-gray-600">{{ post.description }}</p>
                  </div>
                  <div class="tw-relative tw-mt-8 tw-flex tw-items-center tw-gap-x-4">
                    <img :src="post.author.imageUrl" alt="" class="tw-h-10 tw-w-10 tw-rounded-full tw-bg-gray-100" />
                    <div class="tw-text-sm tw-leading-6">
                      <p class="tw-font-semibold tw-text-gray-900">
                        <a :href="post.author.href">
                          <span class="tw-absolute tw-inset-0" />
                          {{ post.author.name }}
                        </a>
                      </p>
                      <p class="tw-text-gray-600">{{ post.author.role }}</p>
                    </div>
                  </div>
                </div>
              </article>
            </div>
          </q-carousel-slide>
        </q-carousel>
      
      <div class="q-pa-lg q-mt-xl flex flex-center">
        <q-pagination
          v-model="currentPage"
          :max="2"
          direction-links
        />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref , watch} from 'vue'

  const currentPage = ref(1);
  const slide = ref('1');
  const posts = [
    // Array of blog posts here
  ]

watch(currentPage, (currentValue, oldValue) => {
  slide.value = currentValue.toString();
});

</script>
<style lang="scss" scoped>

/* CSS styles go here */

</style>
javascriptvue.jsquasar

Answer №1

There's a clever solution

<q-carousel
            v-else
            v-model="carouselIndex"
            transition-prev="slide-right"
            transition-next="slide-left"
            swipeable
            animated
            navigation
            padding
            control-color="primary"
            infinite
            arrows
            class="transparent full-height"
            keep-alive
        >
            <q-carousel-slide
                v-for="(entity, index) in entities" 
                :key="index"  
                :name="index"
            >
                <div class="row justify-center">

                    <!-- Before Current -->  
                    <EntityIndex
                        class="result-width q-ma-sm"
                        v-if="entities.length > 1"
                        :entity="index === 0 ? entities[entities.length - 1] : entities[index - 1]" 
                        @load="setPopupEntity(index === 0 ? entities.length - 1 : index - 1)"
                    />
                    <!-- Current -->  
                    <EntityIndex
                        class="result-width q-ma-sm"
                        :entity="entities[index]" 
                        @load="setPopupEntity(index)"
                    />
                    <!-- After Current -->  
                    <EntityIndex
                        class="result-width q-ma-sm"
                        v-if="entities.length > 2"
                        :entity="index === entities.length - 1 ? entities[0] : entities[index + 1]" 
                        @load="setPopupEntity(index === entities.length - 1 ? 0 : index + 1)"
                    />
                </div>
            </q-carousel-slide>
        </q-carousel>

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

How can I improve my skills in creating efficient Angular routers?

In my Ionic project, I am dealing with an AngularJS routes file that contains a large number of routes, approximately a hundred. The structure is similar to the one provided below. (function() { 'use strict'; angular.module('applicatio ...

javascriptangularjssonarqubeangular-routing

Tips for placing order import styles css module as the first line in eslint-plugin-import configuration

I'm currently setting up ESLint for my project, using `eslint-plugin-import` to organize module import order. However, I have a specific case with a style CSS module that I want to place at the beginning of the import list. How can I configure ESLint ...

javascriptreactjseslint

Is there a way to access a DOM element in Vue.js after an asynchronous operation?

Upon executing this code, the value of progresstitle becomes undefined. It seems like this is happening because the DOM is not fully loaded after the asynchronous call. How can I resolve this issue? My goal is to access progresstitle once the async operati ...

vue.jsvuejs2vuejs3

React-easy-crop simply provides a blob url as a result

Currently, I am utilizing the react-easy-crop package to enable users to make adjustments to their profile pictures post uploading. However, I have encountered an issue where the cropped image is returned in the form of a blob URL such as blob:http://local ...

javascriptreactjscropdata-uribloburls

What impact does including lang=less in a Vue component's style have on its behavior?

Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment. In my original setup ...

cssvue.jslessvue-component

How is it that a callback function can successfully execute with fewer arguments provided?

Code I'm really intrigued by how this code functions. In the verifyUser function, it passes a callback function as the fourth argument to the verifyToken function. However, upon examining the verifyToken function itself, I noticed that it only has th ...

javascriptexpresswebcallbackbackend

Is there a way to modify the value of a JavaScript object?

My React componentwillmount fetches data from an ExpressJS API using Axios and receives a JSON response, which is then converted to an object by Axios. [{"client_nick":"PlayTalk","connected_time_record":183710127},{"client_nick":"PlayTalk","connected_time ...

javascriptreactjsexpress

Observing the data retrieved from an AJAX request

Currently, I have this AJAX call in my code: $('#search').keyup(function() { $.ajax({ type: "GET", url: "/main/search/", data: { 'search_text': $('#search').val() }, suc ...

javascriptjqueryajaxjsondjango

Error found in Nuxt3 application when using locomotive scroll functionality

I'm working on a Nuxt3 project with Locomotive Scroll and GSAP (repository link: https://github.com/cyprianwaclaw/Skandynawia-Przystan). I'm facing an issue where, when I change the page from index to test and then revert back, the page doesn&apo ...

javascripttypescriptvue.jsnuxt.jslocomotive-scroll

Dealing with a 404 Error in Node.js and Express Routing

After successfully creating a Node/Express app tutorial earlier, I encountered issues when trying to replicate it for a new project on both Ubuntu and Windows. The basic routing consistently fails and results in 404 errors, which is incredibly frustrating! ...

javascriptnode.jsexpress

Using Javascript to eliminate divs on a page that have the attribute display:none

Looking for a way to remove generated divs with display: none using JavaScript? Let's find a solution. <div id="workarea"> <div id="message" class="messages" style="display: none;">Your message was saved</div> <div id="message" c ...

javascripthtmlprototype

Utilizing Async/Await with an Unassigned Object

I'm facing a puzzling issue with an async/await function that refuses to assign to an object. Despite displaying the expected results in the console, when it comes to actually assigning to the object, it fails to do so. Let me elaborate below: Here&a ...

javascriptnode.jsmongooseproperties

cordova and nodejs causing a communication problem

As a UI front end Developer, my expertise lies in user interface design rather than server side and port connections. I have successfully created a node server.js file that looks like this: var app = express(); var http = require('http').Server( ...

javascriptnode.jscordovasocket.io

Result of a callback function

Having trouble returning a value for form validation using a callback function. It's not working for me... <form action="loggedin.php" onsubmit="return test(valid)" method="post"> function test(callback) { var k = ""; var httpRequest = ...

javascriptajax

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...

javascriptjquerycsshtml

How can I pass props from a custom _app.js file to the <Navbar> component in Next.js?

How do I go about passing props to a Navbar component that will be included under the Head component? Although I successfully passed props in the index.js page using getServerSideProps, it seems to not work properly in the _app.js file. import ".. ...

javascriptreactjsnext.jsreact-props

Tips for notifying a user about leaving a page without saving their information

I created a small table where users can input product names and numbers. My question is, how can I notify the user if they try to leave the page without saving the entered information? <form action="index.php" method="post"> <input type="text" ...

javascriptjquerycsshtml

Is it possible for the JavaScript code to cease execution once the tab is closed?

I am working on a JavaScript code snippet that is designed to execute once a component finishes loading: function HelloThere() { React.useEffect(() => { setTimeout(() => { // code to make a server call to write data to DB ...

javascriptreactjs

Is there a way to launch a browser in full screen mode using a command line interface?

Is there a clever way to launch a web browser in full screen mode from the command line? The browser's full screen API only activates in response to user interaction. I simply want to show data on a large monitor without any unnecessary elements lik ...

javascriptseleniumweb-applicationscmd

What is the best way to manage data updates in my Vue component?

Is it possible to handle any part of my component's data changing in Vue, not just specific properties? For example, if I have: data() { return { myProp: false, myOtherProp: true } } I can create watches for each property individuall ...

vue.jswatch