Issues arising from the v-for loop iterating through the products list

Apologies for any language errors in my English, as it is not my first language. If you would like to view my github page, you can find it here: https://github.com/CapitaineBarbarossa/test-carousel I am currently facing an issue with creating a dynamic carousel using Vue.js. When I use v-for loop to iterate through the products, the images do not show up initially. However, upon inspecting the page with F12, all the images appear correctly. Oddly enough, if you refresh the page, the images disappear once again. I am unsure of how to resolve this problem.

Thank you in advance for any assistance and have a great day!

I attempted to implement a dynamic carousel but encountered difficulties with image display.

javascripthtmlcssjsonv-for

Answer №1

After reviewing your code, it appears that the issue lies with the CSS and not Vue. The widths and heights of all carousel divs are set to zero due to the use of the position absolute property.

.carousel__body .carousel__slider__item .item__3d-frame {
  position: relative;
  width: 300px;
  height: 200px;
  transition: transform 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.carousel__body .carousel__slider__item .item__3d-frame__box {
  display: flex;
  align-items: center;
  vertical-align: middle;
  text-align: center;
  position: absolute;
  box-sizing: border-box;
  border-color: var(--box-border);
  background: var(--box-bg);
  border-width: 3px;
  border-style: solid;
}


.contain {
  width: 300px;
  height: 200px;
  position: relative;
}

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

Transforming protobufs into JSON using C++

Trying to link data from protobuf to JSON has been quite the task. Here are the key parts of my code: Message* m; std::string json; std::string binary_s; ...populating the message... m->serializeToString(&binary_s); MessageToJsonString(*m, &js ...

jsonprotocol-buffersprotobuf-c

BOOTSTRAP: changing the layout of panels in various sizes for mobile devices

I'm struggling with how to reorganize my panels on mobile devices. Each panel has a different size. Please refer to the attached screenshot for the page layout on large screens (col-lg): https://i.sstatic.net/xcqaT.png EDIT: The layout on large scre ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating an Http interceptor in Ionic 3 and Angular 4 to display a loading indicator for every API request

One of my current challenges involves creating a custom HTTP interceptor to manage loading and other additional functions efficiently. Manually handling loading for each request has led to a considerable increase in code. The issue at hand: The loader is ...

javascriptangulartypescriptionic2

Angular constantly looping due to $watchCollection being triggered repeatedly

I am interested in monitoring the changes of an object, referred to as x, specifically its properties which are checkboxes. When a user checks a box, it alters the checked property (prop1) to 1. Each property contains certain content, and when enabled, it ...

javascriptangularjswatch

arranged horizontally in a row html bootstrap

How can I place 2 horizontal cards next to each other? My current code overlaps the cards and creates a messy layout. I want the cards to be side by side like this: https://i.sstatic.net/s6225.png <div class="card-body p-0 d-flex justify-content-arou ...

htmlcssbootstrap-4

Using Selenium with Python to interact with dropdown elements in webpages

My goal is to extract data from using python's selenium library. I've encountered an issue with two interconnected elements. There are two select statements: a) with id="promptCategoryInput" and b) id='promptShareInput'. The manual pro ...

javascriptpythonseleniumweb-scrapingdrop-down-menu

How can the token be verified when authorizing Google OAuth 2.0 on the server side?

Unable to validate the user token ID on the server side despite following Google's guide at https://developers.google.com/identity/sign-in/web/backend-auth In JavaScript, I retrieve the id token and send it to the server: var googleUser = auth2.cur ...

javascriptphpgoogle-oauthgoogle-api-php-client

Experiencing a 404 error when trying to fetch JSON data from an external site in WordPress through AJAX, and struggling to display

I am encountering a problem when attempting to access an external website via ajax. When I try to access it, a 404 error occurs preventing me from storing the name parameter data and displaying it on my datatable. Here is one of the error messages displaye ...

phpjsonajaxwordpressdatatables

React - Uncaught TypeError: Cannot access property 'renderSidebaritem' of an undefined object

Issue with React code - TypeError: Cannot read property 'renderSidebaritem' of undefined. (anonymous function) I have identified the problematic line and commented it out. It seems like there is an error related to the binding of 'this&apos ...

javascriptreactjs

The never-ending cycle of requests on React infinite scroll persists relentlessly

I have been utilizing the React Infinite Scroller library to implement a feature where more content is loaded as the user scrolls to the end of the page. The code snippet I am using is shown below: import React from 'react'; import {Route, Link ...

javascriptreactjsinfinite-scroll

The chosen options are not appearing. Could this be a problem related to AngularJS?

I am working on setting up a dropdown menu in HTML that includes only the AngularJS tag. This dropdown menu will be used to populate another AngularJS dropdown menu. Below is the code for the first dropdown menu: <select class="form-control" ng-model=" ...

javascripthtmlangularjs

"Error: The functionality of finding places on Google Maps is not

I've encountered an issue while trying to integrate Google Maps into my Node application. The map is loading correctly and I'm able to retrieve my location. However, I am facing a problem with implementing the Google Places API code to allow user ...

javascriptangularjsnode.js

Jasmine was disappointed when the promise from a simulated factory was rejected

Snippet of my controller's initialization process: var initialize = function () { httpUsers.fetchUsers().then(function (data) { $timeout(function() { // Perform some actions... }); }).catch( ...

javascriptangularjsunit-testingjasmine

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

htmlcsshover

Enhance User Experience with a Customized Progress Bar using Google Apps Script

I created a Google Sheets cell counter in Apps Script and need help setting up the bootstrap progress bar using the "percentage" variable. GS function cellCounter() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheets = ss.getSheets(); var ...

javascriptgoogle-apps-scriptgoogle-sheetsbootstrap-4

Is there a way to verify if the JSON Object array includes the specified value in an array?

I am working with JSON data that contains categories and an array of main categories. categories = [ {catValue:1, catName: 'Arts, crafts, and collectibles'}, {catValue:2, catName: 'Baby'}, {catValue:3, catName: 'Beauty ...

javascriptjqueryarraysjson

One approach to animating elements on a web page is by utilizing Node.js

Imagine you want to programmatically define animated movement for elements on a web page. In JavaScript, this can be achieved using techniques outlined in this helpful guide: How TO - JavaScript HTML Animations. But how would you do this in Node.js? UPDAT ...

javascriptjqueryhtmlnode.js

Display or conceal specific fields depending on the selection from a dropdown menu

I'm currently experimenting with using JavaScript and/or jQuery to dynamically hide specific HTML elements based on the selection in a drop down menu. Here is what my page setup looks like: [Drop down menu] [text field 1] [text field 2] [text field ...

javascripthtml

Unable to display animation without first launching it on Rive web

I attempted to incorporate a Rive animation into my Angular web application <canvas riv="checkmark_icon" width="500" height="500"> <riv-animation name="idle" [play]="animate" (load)=&qu ...

htmlangulartypescriptrive

Is it possible to dynamically adjust the array size based on the number of photos in a file using JavaScript or PHP?

Apologies if the inquiry is not clear, but essentially I have PHP code that searches for photos in a directory based on the userId provided in the URL. For example, if the userId is 1, it will access Photos/1, retrieve all the photos in that directory, an ...

javascriptphpjqueryhtmlarrays