What is the best way to incorporate this into a Vue project?

I am in the process of transitioning my code to Vue.js, so I am relatively new to Vue. In the screenshot provided (linked below), you can see that there are 4 columns inside a div with the class name columns. I attempted to use the index, like v-if='index % 4 === 0', but I was unable to access the index outside of the v-for loop.

This is what I am trying to achieve: https://i.stack.imgur.com/aO2Rx.png

<template lang="pug">
.container
  .columns // add this after every 4 coulmns
    .column.is-3.vid(v-for='(item,index) in items')
      .panel
        p.is-marginless
         a(:href='item.videoId')
           img(:src='item.thumbnail')
        .panel.vidInfo
          .columns.hax-text-centered
            .column
              .panel-item.reddit-ups
                span {{ item.score }}
                i.fa.fa-reddit-alien.fa-2x
              .panel-item.reddit-date
                i.fa.fa-calendar.fa-2x
</template>
javascriptvue.jsvuejs2vue-component

Answer №1

To start, you can divide the items into groups of a specific size. For example, if we consider items to be an array of numbers `

var items = [1,2,3,4,5,6,7,8,9,10]
groupsLen = Math.ceil(items.length / 4)
var groups = [];
for(var i = 0; i < groupsLen; i++){
    var start = i * 4;
    var end = start + 4;
    groups.push(items.slice(start, end))
}

` Then your template will resemble this structure (with each item as an object)

`

<template lang="pug">
.container
  .columns(v-for="group in groups") // add this after every 4 columns
    .column.is-3.vid(v-for='(item) in group')
      .panel
        p.is-marginless
         a(:href='item.videoId')
           img(:src='item.thumbnail')
        .panel.vidInfo
          .columns.hax-text-centered
            .column
              .panel-item.reddit-ups
                span {{ item.score }}
                i.fa.fa-reddit-alien.fa-2x
              .panel-item.reddit-date
                i.fa.fa-calendar.fa-2x
</template>`

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

Stripping out only the position attribute using jQuery

I have implemented a code with the following characteristics: The navigation items' texts are hidden behind certain Divs, which I refer to as Navigation Divs. When the mouse hovers over these pixels (navigation Divs), the text that is behind the ...

javascriptjquerycss

An error with code -4058 occurred when I tried to execute the command npm run start-rewired

When I start my React application using npm with the command npm run start-rewired, I encountered an error that looks like this: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="265654494c434552661608170816">[email p ...

javascriptnode.jsreactjsnpm

Authentication through Proxy and requests from nodes

I am attempting to make a get request to a website via https using the request module. However, I am behind a proxy that requires authentication. Despite my attempts to add the authentication, the connection to the site fails. I have experimented with add ...

javascriptnode.jsnode-webkitnode-requestproxy-authentication

What is the best way to incorporate external HTML content while ensuring HTML5 compatibility? Exploring the different approaches of using PHP, HTML

While this may seem like a simple task to the experts out there, I have been struggling for over an hour without success... My objective is to use a single footer file and menu file for all my webpages while considering blocking, speed, and other factors. ...

phpjavascriptperformancehtml

Unable to pass value through form submission

Having some trouble displaying data from an API on my HTML page. The function works fine when I run it in the console. <body> <div> <form> <input type="text" id="search" placeholder="Enter person& ...

javascripthtml

I am facing an issue where new tags are not being created when I pre-fill values in the tags input field on Bootstrap

When working on the Product Edit Page, I successfully displayed the old data that was selected previously. However, I am facing an issue with adding new tags. The new tags do not appear when I press enter or space after typing in the input field. It is pos ...

javascripthtmljquerycssbootstrap-4

Using `await` is only permitted in an asynchronous function within Node.js

I've been working with node and express to develop a server for my application. Here is a snippet of my code: async function _prepareDetails(activityId, dealId) { var offerInfo; var details = []; client.connect(function(err) { assert.equ ...

javascriptnode.jsmongodbexpressasync-await

Passing props to another component using the <Link> element in React Router

I'm working on a project where I need to display search results using an array. When a user clicks on an item, I want to pass that item as props rather than as parameters. Below is the code snippet: { this.props.results.map((result) => { ...

javascriptreactjsreact-router

Master the art of filtering rows in an HTML table based on a select option when the mouse is clicked

I am trying to create a table that displays only the rows selected in a dropdown menu. Here is an example: If "All" is selected, the table should display all rows. If "2017" is selected, the table should display only the rows that have "2017" in the sec ...

javascriptjqueryhtml

Having trouble with React JS BrowserRouter not routing correctly when used with Express JS and Nginx proxy

I am facing an issue where I need to send parameters to a React component through the URL. This works perfectly fine when I test it in my localhost development environment. However, the problem arises when I deploy the React app to my live server (). The ...

javascriptnode.jsreactjsexpressnginx

Encountered an unanticipated symbol at column 2 while using the Angular Google Recaptcha

I have integrated the Angular Google Recaptcha directive into my application from https://github.com/VividCortex/angular-recaptcha. However, upon running my application, I encountered an error stating that I am using my public key instead of my private key ...

javascriptangularjsrecaptcha

What is the best way to share models across different node.js projects?

In my setup, I have two node.js projects - project A and project B. Project A serves as the main project, while project B is more of an "ad-hoc" project with a specific purpose. The challenge lies in the fact that project B requires access to project A&apo ...

javascriptnode.jsexpressproject-managementdry

How can I retrieve an array from the server side using AngularJS?

Currently, I'm involved in developing a web application meant for team collaboration. While the login and signup pages have been set up, other members of my team are focusing on the server (built with node.js and express framework) and database aspect ...

javascriptangularjsarraysnode.jsweb-development-server

The clearInterval function in Javascript may not effectively halt an ongoing animation

Whenever I press a button, the element rotates using setInterval and clearInterval to stop rotation at a specific value by clearing the interval time t. Everything works perfectly except when I continually click the same button before the current animation ...

javascriptsetintervalclearinterval

Saving JSON data into an HTML element using Handlebars templating

Is there a way to save the entire JSON object within an HTML element as a data attribute? let a = {name : "sample", age : "34"} $.find('#someDiv').data('adata', a); Is it possible to achieve the same result using Handlebars when creat ...

javascripthtmlhandlebars.js

Rendering a Vue select list before receiving data from a Meteor callback

I am currently facing an issue with populating my events array from a meteor call so that it appears in a select list. The 'get.upcoming' Meteor function returns an array of JSON objects, but it seems like the select list is being rendered before ...

javascriptmeteorcallbackvue.jsvuejs2

Modifying the value of a property in an object array created using the map method is ineffective

I have a collection of objects: https://i.sstatic.net/XNrcU.png Within the collection, I wished to include an additional property to the objects. To achieve this, I utilized the map function: returnArray = returnArray.map((obj) => { obj.active = "fal ...

javascriptangulartypescript

Is there a way to verify if the request query value is empty like ""?

When creating a Node.js component, I encountered an issue with one of my APIs that sometimes returns empty query values like "". In order to handle this scenario, I need to implement a conditional statement. For example, the query may look like this: { ...

javascriptnode.jsstring

Annoying scrolling issue arising from using jQuery Buttonset

Dealing with jQuery UI buttons and buttonsets has been quite a challenge for me. Despite searching extensively on this site, I have yet to find a satisfactory solution that works smoothly. My setup includes jQuery rev 1.11.1 and jQuery UI rev 1.9.2. The i ...

javascriptjqueryimagebuttonscroll

When working with TypeScript, how do you determine the appropriate usage between "let" and "const"?

For TypeScript, under what circumstances would you choose to use "let" versus "const"? ...

javascripttypescript