ImGodz

Thanks a lot for your answer ! I also found an other solution that worked. I used a computed function to make a new array of object that only contains this information with the id of the variant. I don't know if it's a good idea for the performance side of things but it worked, but I might use your solution ! Thanks again ! <div v-for="size in sizes" :key="size"> {{size.size}} </div> ------------------------------------------------------------ computed:{ sizes:function(){ var sizes = []; for(var i = 0; i < this.variants.length; i++){ for(var k = 0; k < this.variants[i].sizes.length; k++){ sizes.push({id : this.variants[i].id, size : this.variants[i].sizes[k].size, quantity : this.variants[i].sizes[k].quantity}); } } return sizes; }

Hi, I'm trying loop through an object inside of an other object in vuejs and I can't figure out how to make it work. I'm trying to show all the sizes availaible for the variants in my html. Here's the data : export default { data() { return { product: 'Shirts', description: 'Description of the product', image: 'src/assets/img/black-shirt.jpg', inventory: 10, onSale: true, details: ['50% cotton', '30% polyester', '20% wool'], variants: [ { id: 2234, color: 'green', image: 'src/assets/img/green-shirt.jpg', sizes: [ { size: 'S', quantity: 10 }, { size: 'M', quantity: 3 }, { size: 'L', quantity: 4 }, { size: 'XL', quantity: 8 } ], }, { id: 2235, color: 'blue', image: 'src/assets/img/blue-shirt.jpg', sizes: [ { size: 'S', quantity: 10 }, { size: 'M', quantity: 3 }, { size: 'L', quantity: 4 }, { size: 'XL', quantity: 8 } ], }, ], } } } Here's what I've tried for the moment : <div v-for="size in variants.sizes" :key="size.size"> {{ size.size }} </div> Any help would be great! Thanks Full code : <template> <div id="app"> <div class="nav-bar"></div> <div class="product-display"> <div class="product-container"> <div class="product-image"> <img v-bind:src="image"> </div> <div class="product-info"> <h1>{{ product }}</h1> <p v-if="inventory > 5">In stock</p> <p v-else-if="inventory <= 5 && inventory > 0">Almost sold out</p> <p v-else>Out of stock</p> <p v-if="onSale">On sale!</p> <p>{{ description }}</p> <ul> <li v-for="detail in details" :key="detail"> {{ detail }} </li> </ul> <div v-for="variant in variants" :key="variant.id"> {{variant.color}} </div> <div v-for="size in variants.sizes" :key="size.size"> {{ size.size }} </div> </div> </div> </div> </div> </template> <script> export default { data() { return { product: 'Shirts', description: 'Description of the product', image: 'src/assets/img/black-shirt.jpg', inventory: 10, onSale: true, details: ['50% cotton', '30% polyester', '20% wool'], variants: [ { id: 2234, color: 'green', image: 'src/assets/img/green-shirt.jpg', sizes: [ { size: 'S', quantity: 10 }, { size: 'M', quantity: 3 }, { size: 'L', quantity: 4 }, { size: 'XL', quantity: 8 } ], }, { id: 2235, color: 'blue', image: 'src/assets/img/blue-shirt.jpg', sizes: [ { size: 'S', quantity: 10 }, { size: 'M', quantity: 3 }, { size: 'L', quantity: 4 }, { size: 'XL', quantity: 8 } ], }, ], } } } </script>

Hi Geo3, Thanks a lot for your answer! I will defenetly add those Durock V2 stabz to my cart. About the mounting plate, the only one I can really find on amazon is this one, it's kind of a bummer that there is only this color but oh well! Does it seems like it's a good one or I should shop somewhere else ? I've also found this foam that is 1.5mm thick, I'm just not sur if the foam goes between the pcb and the mounting plate or if it goes under the pcb in the case, or both? And about the lube, since I'm trying to keep my build under 300$ I don't really know if I should buy some, since I've heard that tangerine switches are allready lubed pretty good, but I might be wrong. Thanks again !

Hello everyone, I've tried to build my first mechanical keyboard this week. I've selected all the parts that I thought would fit well together and that would also match my tastes. I would like a little feedback on my build if possible by someone that knows more then I do about keyboards. I would like to be sur that I'm not missing anything to have a complet and working keyboard at the end. Maybe even suggestion to modify somethings that I might over spend or under spend on. And finally, I'm a programmer so is a 60% keyboard suitable for a programmer or not? I've heard that it's possible to use the fonction key to map more keys like arrows for example, but I still want to hear your opinion on this! Here's a quick look at the parts I've selected : ~70$ Switches : C³EQUALZ Tangerine Switch | https://swagkeys.com/products/c-equalz-tangerine-switch 34$ Keycaps : Coral Sea Keycaps | https://www.amazon.ca/-/fr/Touches-personnalisées-adaptées-claviers-mécaniques/dp/B08SLQJTKC/ref=sr_1_5?__mk_fr_CA=ÅMÅŽÕÑ&keywords=keycaps%2B60%2Bpercent&qid=1639198745&sr=8-5&th=1 40$ PCB : GH60 | https://www.amazon.ca/-/fr/GH60-64-Minila-Entièrement-programmable-clavier-mécanique/dp/B07GTBX7L2/ref=sr_1_4?gclid=CjwKCAiAksyNBhAPEiwAlDBeLKRzW1iZrvH_cG07Qb36OtHTi5UBo1Gg4RAUTAt6AouSTN7tMEDgBhoCbO8QAvD_BwE&hvadid=538245841436&hvdev=c&hvlocphy=1002719&hvnetw=g&hvqmt=e&hvrand=5324230855697220209&hvtargid=kwd-826192254922&hydadcr=27924_10609694&keywords=60%2Bpercent%2Bpcb&qid=1639195759&sr=8-4&th=1 84$ Case : Bamboo Wood Case 60% | https://www.amazon.ca/-/fr/Bamboo-Wood-Case-Clavier-mécanique/dp/B07GCGX8Q1/ref=pd_bxgy_img_1/144-9233145-7882046?pd_rd_w=0ZWzR&pf_rd_p=8c482a45-7c0f-409b-937c-741a67b11a67&pf_rd_r=KBRPGF0R846PT38GPEY9&pd_rd_r=7b6b3224-6c44-4f79-aecb-35b5202dcdd0&pd_rd_wg=AT292&pd_rd_i=B07GCGX8Q1&psc=1 26$ Mounting plate : Aluminium Plate | https://www.amazon.ca/-/fr/Aluminium-Finition-Anodisé-Positionnement-Stabilisateurs/dp/B07MJWYDZ6/ref=pd_bxgy_img_2/144-9233145-7882046?pd_rd_w=99fKX&pf_rd_p=8c482a45-7c0f-409b-937c-741a67b11a67&pf_rd_r=D948VP1ATFSDPMBDKRR0&pd_rd_r=8cefca5d-d35b-4f40-b1b7-263409157120&pd_rd_wg=5VvfS&pd_rd_i=B07MJWYDZ6&psc=1 38$ Stabilizers : Durock Stabilizers | https://www.amazon.ca/-/fr/Stabilisateurs-support-claviers-mécaniques-compatibles/dp/B096JQPDGJ/ref=pd_bxgy_img_2/144-9233145-7882046?pd_rd_w=b0d4q&pf_rd_p=8c482a45-7c0f-409b-937c-741a67b11a67&pf_rd_r=RCQ23E9BAED05YBFG3H4&pd_rd_r=b5d9979b-08f7-4b39-8955-747fa6e9877e&pd_rd_wg=tb73X&pd_rd_i=B096JQPDGJ&th=1 Thanks for reading my post!

Hello, My motherboard (asus z270-a) have a 4 pins rgb header, but I bought a water cooler with rgb that only connect to 3 pins rgb and and an other thing that only connect to 3 pins rgb, How can I controle both of them with my 4 pins header ? I can't find any converter that as multiple 3 pins connexions, please help! Thank!

I found it!

Hi, I have done a reset of windows 10 and now I can't boot back in windows. Before the reset I deleted all the partitions that I created for my dual boot with unbuntu. Then I started the reset and when the reset restarted the laptop, it's oppening a GNU Grub command line and when search for the boot of windows I can't find it. Please help!

If this can ever help someone, the problem was that I was declaring reservations like this: let reservations = [] But instead you need to use a constant : const [reservations, setReservations] = useState([])

This is the output before the renderCard return, it's the array of reservations [2], then reservations.includes(card.id), then card.id

import React, { useState, useEffect} from 'react' import {Card, ListGroup, ListGroupItem} from "react-bootstrap"; import axios from "axios"; import moment from "moment"; import "moment/locale/fr-ca"; import { Button } from "react-bootstrap"; require("es6-promise").polyfill(); require("isomorphic-fetch"); export default function Recherche(props){ moment.locale("fr-ca"); const [data, setData] = useState([]) const [q, setQ] = useState("") const [d, setD] = useState("") const [c, setC] = useState(false) const [cat, setCat] = useState("") const [searchColumns, setSearchColumns] = useState(["emplacement_depart", "emplacement_destination", "ville"]) //const [reservations, setReservations] = useState([]) let reservations = [] useEffect(() => { fetch('http://localhost:3001/deplacements') .then((response) => response.json()) .then((json) => setData(json)); }, []); function search(rows) { return rows.filter((row) => searchColumns.some( (column) => row[column].toString().toLowerCase().indexOf(q.toLowerCase()) > -1 ) ); } const [columns] = useState(["emplacement_depart", "emplacement_destination", "ville"]); function searchDate(rows){ return rows.filter(row => moment(row.date_heure).format('L').toString().split("T")[0].indexOf(d.toLowerCase()) > -1 ); } function searchCategorie(rows){ return rows.filter(row => row.categorie_id.toString().toLowerCase().indexOf(cat.toLowerCase()) > -1 ); } let account = "'"+props.user.account.accountIdentifier+"'" //Get le tokenId de l'utilisateur let user_id = null //Trouve le id de l'utilisateur avec son tokenId axios.get("http://localhost:3001/users/"+account).then(function (response) { user_id = response.data.id }); axios.get('http://localhost:3001/reservations', { params: { user_id: user_id } }).then(function (response) { if (typeof response.data !== 'undefined' && response.data.length > 0) { response.data.forEach(e => reservations.push(e.deplacement_id)) //console.log(reservations) } }); const renderCard = (card, index) => { let tokenId; let cout; let estReserver; let now = Date.now(); now = moment(now).subtract(5, 'hour').toISOString(); axios.get('http://localhost:3001/users', { params: { userId: card.chauffeur_id } }).then(function (response) { console.log(response.data[0].tokenid) tokenId = response.data[0].tokenid; }); /* Affichage date */ let date = moment(card.date_heure); //console.log(date.toISOString(), " ",now); //console.log(card.ville,card.date_heure," ", card.date_heure.split("T")[0].toString().toLowerCase(), " " , date); console.log(now, " NOW ") /* Affichage coût */ if (card.cout == 0 || card.cout == null){ cout = 'Gratuit'; } else { cout = card.cout + "$"; } //Regarde si le déplacement est déja réserver par l'utilisateur //Fonction quand l'utilisateur clique sur réserver function reserver(){ //Crée la réservation dans la base de données axios.post('http://localhost:3001/reservations', { deplacement_id: card.id, user_id: user_id }) .then(res => { console.log(res); console.log(res.data); }, (error) => { console.log(error.message); }); //Modifie le nombre de places disponnibles du déplacement réserver axios.put('http://localhost:3001/deplacements/'+card.id, { categorie_id: card.categorie_id, ville: card.ville, emplacement_depart: card.emplacement_depart, emplacement_destination: card.emplacement_destination, date_heure: moment(card.date_heure).format('L') + ' ' + moment(card.date_heure).format('LTS'), recurrent: card.recurrent, cout: card.cout, nb_places: card.nb_places - 1, chauffeur_id: card.chauffeur_id }) .then(res => { console.log(res); console.log(res.data); }, (error) => { console.log(error.message); }); } if (reservations.indexOf(card.id) !== -1){ estReserver = true; } else{ estReserver = false; } console.log(reservations, reservations.indexOf(card.id), card.id) if (card.date_heure > now) { if (c && cout != 'Gratuit' || estReserver){return } else if (estReserver){return console.log(card.id + ' est reserver.')} else { return ( <Card style={{width: '18rem'}} key={index} className="box" border="dark"> <Card.Header>Conducteur : { card.chauffeur_id }</Card.Header> <ListGroup variant="flush" className="infoDeplacement"> <p><strong>Ville : </strong> {card.ville}</p> </ListGroup> <ListGroup variant="flush" className="infoDeplacement"> <p><strong>Départ : </strong>{card.emplacement_depart}</p> </ListGroup> <ListGroup variant="flush" className="infoDeplacement"> <p><strong>Destination : </strong>{card.emplacement_destination}</p> </ListGroup> <ListGroup variant="flush" className="infoDeplacement"> <p><strong>Date : </strong>{date.format("dddd")} le {date.format("LL")}</p> </ListGroup> <ListGroup variant="flush" className="infoDeplacement"> <p><strong>Heure : </strong>{date.format('LT')}</p> </ListGroup> <ListGroup variant="flush" className="infoDeplacement"> <p><strong>Coût : </strong>{cout}</p> </ListGroup> <ListGroup variant="flush" className="infoDeplacement"> <p><strong>Places disponnibles : </strong>{card.nb_places}</p> </ListGroup> <Button type={"button"} variant="default" className="btn-reserver" onClick={reserver}>Réserver</Button> </Card> ) } } } return ( <div> <div> <div className='row'> <label className="rechercheCheckbox"> Recherche : <input type="text" value={q} onChange={(e) => setQ(e.target.value)}/> </label> { columns && columns.map(column => <label className="rechercheCheckbox"> <input type="checkbox" checked={searchColumns.includes(column)} onChange={(e) => { const checked = searchColumns.includes(column); setSearchColumns((prev) => checked ? prev.filter((sc) => sc !== column) : [...prev, column] ) }} /> {(() => { switch (column) { case "emplacement_depart": return "Départ"; case "emplacement_destination": return "Destination"; case "ville": return "Ville"; } })()} </label>) } <label className="rechercheCheckbox"> <input type="checkbox" onChange={(e) => setC(!c)}/> Gratuit </label> </div> <div className='row'> <label className='rechercheCheckbox'>Type de déplacement :</label> <select value={cat} name="categorie_id" onChange={(e) => setCat(e.target.value)}> <option value=''>Choisir...</option> <option value='1'>Vers un pavillon</option> <option value='2'>À partir de Victoriaville</option> <option value='3'>Inter-pavillons</option> </select> <label className="rechercheCheckbox"> Date : <input type="date" value={d} onChange={(e) => setD(e.target.value)}/> </label> </div> </div> <div className="grid"> {searchCategorie(searchDate(search(data))).map(renderCard)} </div> </div> ); } reservations.indexOf(card.id) always returns -1 or reservation.includes(card.id) always returns false I have no idea why, please help!

Thank you so much Akio, your answer is really helpfull!

Yes, This a page from this manual, but I still don't understand if it would work when I look at the specs haha.

Hello, I am trying to figure out if my amp can power the headphones Dt 880 (600 ohms), my amp is an sherwood rv-5030r, am I wrong if by looking at this shema it seems like 80w goes to each headphone cup. Thanks!

Can I run the HD 6XX without an amp, Linus said in one of his video that you can run them on anything?

I promise this is my last question haha, but why the dt 990 pro 250 ohms are cheaper then the 770 250 ohms, should I not get those instead? ^^