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.

Setting raised = true to an ember button when on current page/template

<div class="flex">
<div class="layout-row layout-align-end-center">
{{#paper-button href="overview" raised=true primary=true}}Overview{{/paper-button}}
{{#paper-button href="incomes"}}Incomes{{/paper-button}}
{{#paper-button href="expenses"}}Expenses{{/paper-button}}
{{#paper-button href="settings"}}Settings{{/paper-button}}
</div>
</div>
So I am trying to set the raised=true whenever I am on certain page/template. The above code is from my application template. Is there any way of doing this using JS/Ember or should I just do it manually in each of my templates?

I think the best way to go is to write a custom component wrapping paper-button. ember-route-helpers gives you nice helpers to do that:
{{#paper-button
onclick={{transition-to #route)
href=(url-for #route)
raised=(is-active #route)
primary=(is-active #route)
}}
{{yield}}
{{/paper-button}}
Then you can use that component with {{#your-component route="settings"}}Settings{{/your-component}}.
It's important to understand that you should pass both the action and the href. Because then when people click on the button it will make a transition and dont reload the entire page, but rightlick->open and screenreaders are are not broken.

Is it safe to use window.open(param,'_blank') by passing in the params during onClick in react to open a page in new tab?

I have an anchor tag that has an onClick method on it, which gets passed in the event and parameter. The parameter is for example "https://www.google.com"
What is it for? User lands on the main page where they will log in and see "web apps" they are authenticated to use. Once logged in, they will click one of the apps to go to the respective page, in doing so, the credentials will be shared with that page so they don't have to log in again.
The issue: As I build this main portal I am using an onClick tied to the anchor tags to pass in the event and parameter and inside "this.handleSubmit" I am doing window.open(param,'_blank'). Is this safe to do? What potential issues am I facing?
EDIT added code
My stateful component:
<div class={`row ${classes["appcard-row-style"]}`}>
<div class={`col-sm ${classes["appcard-col-style"]}`}>
<AppCard app-link="https://www.google.com" name="App" linkClick={this.handleSubmit}/>
</div>
<div class={`col-sm ${classes["appcard-col-style"]}`}>
<AppCard app-link="#" name="coming soon" linkClick={this.handleSubmit}/>
</div>
<div class={`col-sm ${classes["appcard-col-style"]}`}>
<AppCard app-link="#" name="coming soon" linkClick={this.handleSubmit}/>
</div>
</div>
my stateless component:
<div class={`card text-center ${classes["card-main-style"]}`}>
<img
class="card-img-top"
src="https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">{this.props.name}</h5>
<a href={this.props["app-link"]} class="btn btn-primary" onClick={(e)=>linkClick(e,this.props["app-link"])}>
Go to link
</a>
</div>
</div>

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>

click twice on button process the ngIf statement in other component

I've added breadcrumb in my site such that when clicks on it, it makes that specific variable undefined(which session stored value and can retrieved easily in other component) and based on that, in other component I've ngIf for that variable such that if that variable is undefined then that specific div should not be shown and other div should be shown. You can get more idea by looking into following gifs.
Problem I'm facing is on first click it don't go back to that other div which it does on second click.
Clicking twice on breadcrumb for Model(or its value) do the trick but i want to do this happens on first click.
Breadcrumb component TS file:
#SessionStorage() model: any;
onClickModel(m){
this.model = m.value; // gets the value from button and set as model value
}
other component HTML file:
<div class="model" *ngIf="model && !provider">
<div class="row">
<div class="col-md-12 text-center pb-20">
<h2>Choose your Carrier</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<!-- That next component buttons for providers -->
</div>
</div>