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

The extent of utilizing the click handler in ECMA script 6

In ES6 arrow functions, the scope of this becomes available. However, there are instances where I cannot access this in an arrow function while it works with a normal anonymous function. For example: Sample 1 $(document).ready(function() { $(' ...

javascriptjqueryecmascript-6

Issue with Jquery plugin malfunctioning on dynamically loaded elements via Ajax requests

Description: I'm currently working on a project where I need to load elements with expiration dates pulled from my database. To achieve this, I am using a Jquery plugin that relies on the HTML5 Data Type Attribute for setting the "end date". Everythin ...

javascriptjqueryajax

What is the process for creating a modal transition?

I am attempting to add animation to a modal using a transition effect. My goal is to open it slowly, either from the center of the screen or from the bottom. However, I am struggling to understand how this can be achieved... While searching on Google, I c ...

javascriptjqueryhtmlcss

Using JavaScript, transform a client's date/time string into a JSON-compatible date/time string

I need to find a way to convert a client's date/time string on a form into a JSON date/time string using JavaScript with moment.js for a Django REST API backend service. Here is the initial attempt: document.getElementById("dt_tm").value = moment(do ...

javascriptjsondjangodatetime

Angular 6 is experiencing an issue with the functionality of the file toggle JS

Currently, I am utilizing the file toggle.js within the Urban theme. In the HTML chatbox, using the img, the file toggle.js is hardcoded and is functioning properly. However, when implementing code in Angular 6, the toggle.js is not functioning as expecte ...

javascriptangulartypescriptangular6

Error in linking PHP code to display stored tweets using HTML code

![enter image description here][1]![image of output of twitter_display.php][2] //htmlsearch.html file <!doctype html> <html> <head> <title>Twitter</title> <meta charset="utf-8"> <script> window.onload = function ...

javascriptphpjqueryhtmltwitter

Could one potentially use jQuery to navigate through JSON output?

My goal is to generate a JSON list that includes CSS classes and their respective URL records. Here's an example: var jsonList = [{ "CSSClass": "testclass1", "VideoUrl": "/Movies/movie.flv" }, { "CSSClass": "testclass2", "VideoUrl": "/Movies/ ...

javascriptjqueryjsonjquery-selectors

I'm having trouble getting my bot command handler to function properly

When it comes to my command handler, the commands function properly. However, when I attempt to include arguments like $user-info @user instead of just $user-info, it returns an error stating that the command is invalid. Code //handler const prefix = &ap ...

javascriptdiscord.js

Generate a table framework by dynamically adjusting the number of rows and columns

I'm running into an issue with my implementation of nested for-loops to dynamically generate a table using JavaScript. For this particular scenario, let's assume numRows = 2 and numCols = 6. This is the code snippet in question: let table = $( ...

javascriptjqueryhtml

What is the best way to implement function chaining in TypeScript?

I'm interested in implementing function chaining in typescript. Let's consider a sample class: export class NumberOperator { private num; constructor(initialNum) { this.num = initialNum; } public add(inc = 1) { this.num += inc ...

javascriptfunctiontypescript

Issue with two Jquery slider forms

Within a Jquery slider, I have implemented two distinct forms (using this specific Jquery slider: http://tympanus.net/Tutorials/FancySlidingForm/) . My goal now is to establish JavaScript/jQuery validation for these two forms separately BASED on the form ...

javascriptjqueryformsvalidation

In JavaScript, the addition and subtraction buttons may become disabled after nested lists are used

Recently, I embarked on a project to enhance the functionality of restaurant table items and implement value-saving features. Initially, everything worked smoothly with one item list. However, upon introducing a second list and attempting to manipulate it ...

javascripthtmlcsslistonclick

Remove the JSON object from the screen in an asynchronous manner

I am currently working on developing a single-page application that retrieves information from a JSON file, displays it on the screen, and performs various actions. At this point, all the information is being properly displayed on the screen: http://jsfid ...

javascriptjqueryajaxjson

Autocomplete's `getOptionLabel` function unexpectedly returned an object ([object Object]) instead of the expected string

Currently delving into the world of ReactJS and working with @mui controls, specifically a Multiselect Dropdown with autocomplete feature. Here is the child component causing me some trouble, displaying the following error message: "index.js:1 Materi ...

javascriptreactjsmaterial-ui

Different approaches for expanding object.prototype while utilizing jQuery

Once upon a time, I made the mistake of trying to extend Object.prototype and ended up encountering errors in my jQuery file. After doing some research, I found out that extending Object.prototype is frowned upon in the JavaScript community due to potentia ...

javascriptjquerydefineproperty

Using Vue.js to set a mobile browser's viewport height to 100%

My webpage has a min-height: 100vh property which causes some overflow on the bottom when rendered on mobile browsers. To fix this issue, I am using the following script: methods: { calcVH() { const vH = Math.max(document.documentElement.clien ...

vue.jsvuejs2mobile-safarimobile-chrome

Ensuring the accuracy of a single field within a form containing multiple fields is made possible through the utilization of

I am facing an issue with my emailValidation method. Even though I want it to run when this.$refs.editUserForm.validate('email') returns true, it always seems to return false, especially when a valid email like <a href="/cdn-cgi/l/email-protec ...

javascriptvue.jsvalidationvuetify.js

Failed Deployment on Netlify

My website is currently displaying an "Error establishing a database connection" message. The deploy log indicates that the issue lies within Gridsome. The log below details the deployment process. As a novice, I'm seeking advice on how to troubleshoo ...

vue.jsnetlifygridsome

Implementing role-based authentication in Next.js using Next-auth and Firebase

Currently, I'm in the process of integrating role-based authentication using NextAuth.js into my Next.js application. Despite following the provided documentation meticulously, an error (in profile snippet and callback snippet which I copied from next ...

javascriptfirebasenext.jsjwtnext-auth

The function validateLogin is not defined within the code, resulting in a javascript exception being

Hey there, I'm encountering an undefined function error and I believe my code is correct. Can someone please offer assistance in this situation? Additionally, could you recommend a good tutorial for fetching data through a webservice using the Ajax me ...

javascriptajax