Develop Reference

VueJS: How to pass data to a components from a v-for list

This is my first question on Stack Overflow so I will try my best.
I'm building a an Vue application and I render a list of object coming from an API in a css grid, and when I click on a picture, I open a modale that show the full picture and some information about it, in clear, it's a copy of Instagram.
So the modale is a reusable components, and I use props for sending the data from the parent to the component child. And here is my problem, because I send the full list of data to the props and not only the information of the picture on which I clicked.
Is it possible to send only the information on the element I click, I know that it's possible with router-link but how to do it with props ?
here the code of the parent element:
<ul v-for="post in doc.posts" :key="post.id">
<button v-on:click="toggleModale">
<modal
v-bind:revele="revele"
v-bind:toggleModale="toggleModale"
v-bind:media_url="post.media_url"
v-bind:like_count="post.like_count"
></modal>
<div class="post">
<img class="postImage" :src="post.media_url" alt="" />
</div>
</button>
</ul>
and the code of the child components modal :
<template>
<div v-if="revele" class="container">
<div class="overlay" v-on:click="toggleModale"></div>
<div class="modal">
<button class="btnCls" v-on:click="toggleModale">X</button>
<h2>Je suis un modal</h2>
<div class="image"><img :src="media_url" alt=""></div>
<div class="text">{{like_count}}</div>
</div>
</div>
</template>
<script>
export default {
name: "modal",
props: ['revele', 'toggleModale', 'media_url', 'media_type', 'like_count', 'comments_count', 'timestamp', 'permalink', 'id'],
created() {
console.log("test modal props id",this.id) //undefined;
},
};
</script>
thanks in advance for your help
UPDATE the code sandbox :
https://codesandbox.io/s/boring-andras-tmyqc?file=/src/App.vue

your architecture is a little strange to be honest but i made you a working Sandbox
CodeSandbox
please check the code first and if you need help understanding i will explain you what i did.

A component is not receiving any of it's #Input values

I use Angular 8 and I have 3 components:
CalculationFirst : app-calculation-first
CalculationSecond : app-calculation-second
CalculationThird : app-calculation-third
CalculationFirst is the "parent" component and has CalculationSecond as a "child" in a way that I use CalculationSecond inside html template of CalculationFirst.
So in CalculationFirst.component.html it looks like this:
<div class="container">
<form #f="ngForm" (ngSubmit)="submit()" novalidate *ngIf="settings.isloaded == true">
<div class="row">
<app-calculation-second [elements]="settings.seconds.elements" [epics]="epics"[types]="types" (opendialoglistevent)="openDialogList($event)"></app-calculation-second>
</div>
</form>
</div>
Then CalculationSecond.component.html looks like this:
<div class="col-lg-2 box">
<div class="row">
<div class="row content" *ngFor="let element of elements;">
<div class="col-lg-14">
<app-calculation-third [elem]="element" [types]="types"></app-calculation-third>
</div>
</div>
</div>
</div>
And finally CalculationThird.component.html looks like :
<div class="col-lg-14">
TEST_TEXT_1
{{elem}}
TEST_TEXT_2
</div>
Now, the problem is if I were to just look at my rendered page, only TEST_TEXT_1 page shows, {{elem}} does not render and neither does TEST_TEXT_2. If I am to check the value of elem, it is undefined. I would expect to get an error that I am trying to display undefined, however I do not get anything. My environment.ts is not set to production, so I do not know if my error is not big enough for angular to inform me. (On a tangent, I don't even get an error if I use a json object in an *ngFor instead of an enumerable (Array), but I'm still not sure if I have some lacking setting).
I have also tried, when I use the third component, to not pass the element from *ngFor but to pass a handmade object {'elemId':0}, this had the same result.
If I move :
<app-calculation-third [elem]="element" [types]="types"></app-calculation-third>
to CalculationFirst, making it a direct child, it works perfectly fine, regardless of what I put in there. Is there a limit to the amount of child components you can have? Am I missing something?
*Edit: Also for those who suggested it is the *ngFor or the usage of different variables, I can make CalculationSecond look like the following and still it doesn't work:
<div class="col-lg-2 box">
<div class="row">
<div class="row content" *ngFor="let element of elements;">
<div class="col-lg-14">
</div>
</div>
</div>
<app-calculation-third [elem]="{ elementId: '' }" [types]="types"></app-calculation-third>
</div>

You are passing the elements to seconds input.
[seconds]="settings.seconds.elements"
But you use elements in your app-second-calculation element.

How to define backgrounds for background slider and how to fix it?

i am trying to make an background slider for a restaurant. and for this reason i used gatsby-image-background-slider. when i executed "gatsby develop" it shows no error while execution but when i try to browse in localhost it shows the error "×
TypeError: Cannot read property 'backgrounds' of undefined"
the source code can be found here enter link description here
i wanted to use carousel but i thought it would be better to use this plugin. this is my first try in gatsby. i have installed the plugin and tried the query in graphql. according to gatsby-image-background-slider document, there is no mention of giving the directory to the backgrounds. i tried to input some in relativepath but it is showing error and it is not mentioned in document.
is there any idea how can i get rid of this error or hoa can i have a background slider or carousel like thing in optimizing way?

You need to change your BackgroundSection component as:
export default function BackgroundSection({
img,
styleClass,
children,
title,
query // you forgot this
}) {
return (
<BackgroundSlider className={styleClass} fluid={img} query={query}>
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-xl-9 col-md-9 col-md-12">
<div class="slider_text text-center bold">
<div>
<h1>{title}</h1>
</div>
<div>
<h1>{title}</h1>
</div>
</div>
</div>
</div>
</div>
{children}
</BackgroundSlider>
)
}
You forgot to include query and pass that query into BackgroundSLider component

If you specified images to include (images={[]}) be sure that the image name exists in your image folder

How to create a custom refinement list in vue instant search?

I am working with Laravel Scout and alogolia as the driver. Since I have vue on the front end, I tried the vue instant search package which works really well.
The issue that I am facing is that I need to customize it to the in app styles we are using.
Refinement Section
This is the particular component I am trying to customize. It tried over riding the classes like they show in Styling Section but that won't cut it for me since I need to add more tags and attributes in there.
<ais-refinement-list attribute-name="categories.title" inline-template>
<div class="column w-1/5">
Hello
</div>
</ais-refinement-list>
Now I know I can start to write an inline template like so but what I don't understand yet, is how to get the values for refinements so I can make the checkboxes and furthermore how to send them back to the component once they are selected. Any help is appreciated.

I dug through the package it self here and then found the template inside here. For some reason I could not see this in vendor code.
Got all the variables and method calls from in there
This is the custom version:
<ais-refinement-list attribute-name="categories.title" inline-template>
<div class="column w-1/5">
<h3>Categories</h3>
<hr class="my-3">
<div class='column w-full mb-4' v-for="facet in facetValues">
<div class="checkbox-control mb-4">
<input type="checkbox" :id="facet.name" :value="facet.name" v-model="facet.isRefined" #change="toggleRefinement(facet)"/>
<label :for="facet.name">{{ facet.name }} ({{ facet.count }})</label>
</div>
</div>
</div>
</ais-refinement-list>

Projecting ngFor template in <ng-content> isn't working

I'm working on an Angular 4 project and I'm stuck on a problem regarding templates.
Let me explain it better.
I have two components in my project:
SectionCompontent.ts
HomeCompontent.ts
These are the relative HTML templates
section.compontent.html
<div class="section">
<div class="cards">
<ng-content></ng-content>
</div>
</div>
home.compontent.html
<section>
<div *ngFor="let card of cards">
<span>{{card.title}}</span>
</div>
</section>
When I run this project, I expect to see the rendered content of *ngFor projected inside SectionComponent where <ng-content> is located.
Unfortunately, this is what I see on the DOM instead of <ng-content>:
<!--bindings={}-->
I added some static HTML tags like <p> and <h1> and they allowed it to work.
Can you help me solve this problem?
Thanks in advance.