Hi so i have a button which displays the weather for a specific place. I want the div containing the weather to display when the button has been clicked. I have mapped all the data from the api but i cannot get it to hide until the button is clicked. Also one of the array headers is '1h' how do i map that in my code?
<template>
<div class="w-full flex flex-col items-center gap-12">
<div class="flex md:flex-row flex-col justify-center items-center md:gap-12 gap-4 px-4">
<h2 class="text-4xl md:w-2/4 text-center md:text-start font-semibold">Whats the weather like at here?</h2>
<button type="button" #click="showWeather" class="text-4xl bg-white/30 px-5 py-3 md:py-2 rounded-sm border-2 border-white hover:scale-110" >Show Me</button>
</div>
<div class="flex flex-row justify-between gap-10"> <!--- weather info starts here needs to be hidden until button click--->
<div class="text-3xl font-bold">
<p>Currently</p>
<p>{{weather.weather[0].description}}</p>
</div>
<img class="w-[80px]" v-bind:src="`https://openweathermap.org/img/w/${weather.weather[0].icon}.png`" />
<div class="flex flex-col gap-2">
<div class="flex bg-grey/50 px-3 py-1 gap-6">
<span class="flex gap-3 text-xl">
<p>Temp</p>
<p>{{Math.floor(weather.main.temp)}}°c</p>
</span>
<span class="flex gap-3 text-xl">
<p>Visibility</p>
<p>{{Math.floor(weather.visibility / 1000)}}km</p>
</span>
<span class="flex gap-3 text-xl">
<p>Rain</p>
<p>{{weather.rain.1h}}</p> <!-- title 1h -->
</span>
</div>
<div class="flex bg-stone/50 px-3 py-1 gap-6">
<span class="flex gap-3 text-xl">
<p>Wind</p>
<p>{{Math.floor(weather.wind.speed)}}mph</p>
</span>
<span class="flex gap-3 text-xl">
<p>Wind Dir</p>
<p>{{weather.wind.deg}}°</p>
</span>
<span class="flex gap-3 text-xl">
<p>Humidity</p>
<p>{{weather.main.humidity}}</p>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
api_key: '583cec8e67023fadbbfc71f95265b103',
url_base: 'https://api.openweathermap.org/data/2.5/',
location: 'lon=-1.5534757619068575&lat=53.792218178144196',
weather: {},
}
},
methods: {
showWeather(){
console.log("Test");
fetch(`${this.url_base}/weather?${this.location}&units=metric&appid=${this.api_key}`)
.then(res => {
return res.json();
}).then(
this.setWeather)
},
setWeather(results) {
this.weather = results;
},
},
}
</script>
<style lang="scss" scoped>
</style>
https://codesandbox.io/s/weather-vue-ztyc1y?file=/src/App.vue
Change the initial value of weather to null and add the
v-if="weather"
line 18 & 72
For the "1h" thing, you could use this
weather.rain["1h"]
Related
How do I hide my page "section" when I click on a button. and show it another button is clicked
Here's my code
import './App.css';
import Typed from 'react-typed';
import { useState, useEffect } from 'react';
function App() {
return (
<div className='text-white'>
<div id='index' className='index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<div className='flex justify-center items-center'>
<h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Roll</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400"
strings={['simply', 'design']}
typeSpeed={70}
backSpeed={100}
loop/>
</div>
<p className='md:text-3xl sm:text-2xl text-xl font-bold py-4 '>best <a className='underline text-gray-300'>design</a> and <a className='underline text-gray-300'>simplistic.</a></p>
<button className='bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300 hover:shadow-xl hover:shadow-white hover:scale-110 '>Create</button>//clicking this button will show the div below which has the id of info and hide this current div
</div>
<div id='info' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<h1>Hello</h1>
</div>
<div id='ino' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<h1>Hello</h1>
</div>
</div>
);
}
how do i make the onClick event work it out?
Just set a state let's call it for example hide and set default value false, and on the button click turn it to true.
And you can conditionally hide the button section and show the info section.
import "./App.css";
import Typed from "react-typed";
import { useState, useEffect } from "react";
function App() {
const [hide, setHide] = useState(false);
return (
<div className="text-white">
{!hide ? (
<div
id="index"
className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<div className="flex justify-center items-center">
<h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
Roll
</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400"
strings={["simply", "design"]}
typeSpeed={70}
backSpeed={100}
loop
/>
</div>
<p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
best <a className="underline text-gray-300">design</a> and{" "}
<a className="underline text-gray-300">simplistic.</a>
</p>
<button
className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300 hover:shadow-xl hover:shadow-white hover:scale-110"
onClick={() => setHide(true)}
>
Create
</button>
//clicking this button will show the div below which has the id of
info and hide this current div
</div>
) : (
<div
id="info"
className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<h1>Hello</h1>
</div>
)}
<div
id="ino"
className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<h1>Hello</h1>
</div>
</div>
);
}
You should use useState() react hook.
For example:
import './App.css';
function App() {
const [visible, setVisible] = useState(true);
return (
<div className='text-white' style={{display: visible ? 'block' : 'none'}}>
<div>
<!--first part-->
<div className='flex justify-center items-center'>
<h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Web</h1>
<!--stuff here-->
</div>
<p>stuff here</p>
<button onClick={() => setVisible(!visible)}>Create</button>
<!--when i click on the button it will hide the first part(section) and show the second part -->
</div>
<!--first part end -->
<div>
<!--second part -->
<h1>Hello</h1>
</div>
</div>
);
You could check more details how to use useState() hook here https://reactjs.org/docs/hooks-state.html
I'm working on a Vue3 project, for my needs the "aos" library was suitable, nevertheless I'm having issues with the implementation, practically all the HTML el in which I declare: data-aos="fade-up"( just an example ) => end up fading. I saw the exact moment when it slowly fades.
It's strange becauuse in my Hero Image the and the below work correctly:
<template #title
><h1
class="text-3xl w-full font-bold text-white sm:text-6xl sm:w-screen"
data-aos="fade-up"
data-aos-duration="1000"
>
{{ t('homeHero.title') }}
</h1></template
>
<template #subtitle
><p
class="w-full mt-4 sm:leading-relaxed text-white sm:text-xl sm:w-screen"
data-aos="fade-up"
data-aos-duration="1000"
>
{{ t('homeHero.desc') }}
</p></template
>
But, if i do the exact same in a button el below:
<a
class="block w-full px-8 py-3 text-md font-medium text-white rounded-xl shadow bg-accent sm:w-auto focus:outline-none focus:ring"
:href="`${appDomain}`"
data-aos="fade-up"
data-aos-duration="1000"
>
{{ t('homeHero.buttons.join') }}
</a>
It just dont work.
And I already tried these 2 ways of init.
on my main.ts:
const app = createApp({
render: () => h(App),
mounted() {
AOS.init()
}
})
and like this:
Home.vue
onMounted(() => {
AOS.init()
AOS.refresh()
})
this is the Hero Component, which contains both elements, h1, p, and button..
<template>
<section class="relative bg-black">
<slot name="img" />
<div
class="hidden sm:block sm:inset-0 sm:absolute sm:bg-gradient-to-r sm:from-black sm:to-transparent"
></div>
<div
class="relative max-w-screen-xl px-4 py-32 mx-auto lg:h-screen lg:items-center lg:flex"
>
<div class="max-w-xl text-center flex flex-col self-end sm:text-left">
<slot name="title" />
<slot name="subtitle" />
<div class="flex flex-wrap gap-4 mt-8 text-center">
<slot name="link" />
<slot name="buttons" />
</div>
</div>
</div>
</section>
</template>
I have successfully connected my custom server using Node.js and Express.js with Next.js. I'm trying to fetch a car by its id whenever I click it among other cars, so I can have that particular car only. But I keep getting an error saying params is undefined even though I get the id at the back of my link whenever I click on the single car in the browser. I've tried fetching the data using thunder client and everything works fine. I believe something is wrong with my frontend logic.
This is where I'm trying to fetch the data with the id
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Layout from "#/components/Layout";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import Authorization from "#/HOC/Authorization";
import axios from "axios";
const Car = () => {
const [data, setData] = useState("");
const oneCar = async (params) => {
const { id } = params;
const res = await axios.get(`http://localhost:5000/one-car/${id}`);
setData(res.data);
if (res.status !== 200) {
console.log(res.status);
}
};
useEffect(() => {
oneCar();
}, []);
return (
<Layout>
{data && (
<div className="flex flex-col w-11/12 mx-auto mt-8 justify-center bg-blue-200 rounded-lg shadow">
<div className="flex w-full justify-center mt-6 px-4 mx-auto box-shadow-lg h-2/4 relative">
<Image
src="/assets/images/d17.jpg"
alt="shopping image"
className="mx-auto flex rounded-lg inset-0 w-full h-2/4 object-cover"
width={1000}
height={500}
/>
</div>
<form className="flex-auto p-6">
<div className="flex flex-wrap">
<h1 className="flex-auto text-xl font-semibold text-gray-800">
{data.carName}
</h1>
<div className="text-xl font-semibold text-gray-700 ">
{data.carPrice}
</div>
<div className="w-full flex-none text-sm font-medium text-gray-500 mt-2">
In stock
</div>
</div>
<div className="flex items-baseline mt-4 mb-6 text-gray-800 ">
<Link
href="#"
className="ml-auto hidden md:block text-sm text-gray-500 underline"
>
Size Guide
</Link>
</div>
<div className="flex mb-4 text-sm font-medium">
<button
type="button"
className="py-2 px-4 bg-blue-700 hover:bg-blue-800 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full sm:w-1/4 transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 mx-auto rounded-lg "
>
Buy now
</button>
</div>
<p className="text-sm text-gray-500 text-center ">
Free shipping on all continental US orders.
</p>
</form>
</div>
)}
</Layout>
);
};
export default Authorization(Car);
This is where I fetch all cars and makes the id a parameter to the link address
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Image from "next/image";
import Layout from "#/components/Layout";
import Pagination from "#/components/Pagination";
import { GiBinoculars } from "react-icons/gi";
import { useGetAllCarsQuery } from "#/store/ReduxStore/getAllCarsApi";
import Link from "next/link";
const Market = () => {
//I use RTK Query to fetch the data, and It was successfully fetched
const { data, isLoading, error } = useGetAllCarsQuery();
return (
<Layout>
<div className="2xl:container 2xl:mx-auto">
<div className=" py-3 lg:px-20 md:px-6 px-4">
<div className=" flex justify-center mt-3 items-center">
<div className=" flex space-x-3 justify-center items-center">
<span className="bg-blue-800 px-4 py-2 rounded-md text-2xl text-white">
<GiBinoculars />
</span>
<input
type="search"
className="border-b-2 w-9/12 border-gray-700 -mb-3 leading-5 text-lg p-2 focus:outline-none"
placeholder="Search for cars here..."
/>
</div>
</div>
<hr className=" w-full bg-gray-200 my-6" />
<div className=" grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 lg:gap-y-12 lg:gap-x-8 sm:gap-y-10 sm:gap-x-6 gap-y-6 lg:mt-12 mt-10">
{data?.map((cars, i) => (
<Link
key={i}
href="/[id]"
as={`${cars._id}`}
//I insert the id here
className="relative"
passHref
>
<div>
<div className=" relative group">
<div className="caroverlay"></div>
<Image
width={600}
height={400}
className="rounded-md w-full"
src="/assets/images/d17.jpg"
alt="A girl Posing Img"
/>
<div className=" absolute bottom-0 p-8 w-full opacity-0 group-hover:opacity-100 z-20">
<button className="text-base font-bold leading-4 text-gray-600 hover:bg-gray-300 hover:text-gray-700 bg-white py-3 w-full">
Add to your garage
</button>
<button className=" bg-transparent text-base font-bold leading-4 border-2 hover:bg-gray-300 hover:text-gray-700 border-white py-3 w-full mt-2 text-white">
View Car
</button>
</div>
</div>
<p className=" text-xl leading-5 text-gray-600 md:mt-6 mt-4">
{cars.carName}
</p>
<p className=" font-semibold text-xl leading-5 text-gray-800 mt-4">
<span>$</span> {cars.carPrice}
</p>
</div>
</Link>
))}
</div>
{/* _______________________________________________________ */}
<Pagination />
{/* _______________________________________________________ */}
</div>
</div>
</Layout>
);
};
export default Market;
Here is my backend logic
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const router = require("express").Router();
const auth = require("../../middleware/auth");
const Car = require("../../Model/CarSchema");
router.get("/onecar/:id", auth, async (req, res) => {
try {
const car = await Car.findById(req.params.id);
res.status(200).json(car);
} catch (err) {
res.status(500).json({ msg: "Server Error" });
}
});
module.exports = router;
To access id in nextjs. I imported useRouter from next/router. Then I const router = useRouter(). Then const {id} = router.query
I want to comment dynamically on a video with jQuery, but when I comment on what I'm doing, the old comment changes and all comments receive the same text. The value I get from the input is written to all comments. How can I fix this?
$(document).ready(function() {
$("#addCommentBtn").click(function() {
var comment = $("#commentText").val();
if (comment === "") {
$("#error-msg").fadeIn();
setTimeout(function() {
$("#error-msg").fadeOut();
}, 3000);
} else {
$('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2"> </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
$(".comment-content").text(comment);
$("#commentText").val("");
$("#valid-msg").fadeIn();
setTimeout(function() {
$("#valid-msg").fadeOut();
}, 3000);
}
});
});
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
<div class="container mx-auto">
<div class="w-full flex gap-4">
<img src="assets/media/svg/Group 199.png" alt="">
<input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
</div>
<div class="w-full flex gap-4 justify-end items-center mt-4">
Cancel
<button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
</div>
<ul class="w-full comments">
<li class="w-full comment mt-4">
<div class="w-full md:w-1/2 comment flex flex-col">
<div class="flex gap-4 items-center text-lg font-bold">
<img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
<h1>André Potchinka</h1>
</div>
<div class="ml-16 flex flex-col justify-center">
<div class=" mt-2 flex gap-1 items-center">
<h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
</div>
<div class="w-full flex flex-col">
<input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
<ul class="responses p-4 flex flex-col gap-2 text-gray-500">
<li>Yoruma yanıt verildi :)</li>
</ul>
<div class="flex justify-end">
<button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
With the selector .comment-content, you are selecting all the elements with that class, so of course all comments' text content will be overwritten. Save your new element into a variable and restrict the class selector on that new element instead:
$(document).ready(function() {
$("#addCommentBtn").click(function() {
var comment = $("#commentText").val();
if (comment === "") {
$("#error-msg").fadeIn();
setTimeout(function() {
$("#error-msg").fadeOut();
}, 3000);
} else {
let newComment = $('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2"> </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
$(".comment-content", newComment).text(comment);
$("#commentText").val("");
$("#valid-msg").fadeIn();
setTimeout(function() {
$("#valid-msg").fadeOut();
}, 3000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
<div class="container mx-auto">
<div class="w-full flex gap-4">
<img src="assets/media/svg/Group 199.png" alt="">
<input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
</div>
<div class="w-full flex gap-4 justify-end items-center mt-4">
Cancel
<button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
</div>
<ul class="w-full comments">
<li class="w-full comment mt-4">
<div class="w-full md:w-1/2 comment flex flex-col">
<div class="flex gap-4 items-center text-lg font-bold">
<img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
<h1>André Potchinka</h1>
</div>
<div class="ml-16 flex flex-col justify-center">
<div class=" mt-2 flex gap-1 items-center">
<h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
</div>
<div class="w-full flex flex-col">
<input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
<ul class="responses p-4 flex flex-col gap-2 text-gray-500">
<li>Yoruma yanıt verildi :)</li>
</ul>
<div class="flex justify-end">
<button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
I want to create a tab in vuejs but all i get is an error, Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I have already import all needed components including the tab component but still get the error.
Any help will be appreciated
Profile Component
<template>
<layout>
<div class="mt-4 md:mt-10">
<div class="mx-auto px-3 sm:px-6 xl:px-16">
<div class="flex flex-wrap justify-between">
<div class="md:w-2/6 lg:w-1/5 w-full mb-6 lg:mb-0 lg:block md:order-last lg:order-none">
<div class="bg-white rounded shadow">
</div>
</div>
</div>
<div>
<div class="text-center justify-center flex-col">
<div class="border-t border-b flex justify-center items-center">
<p class="px-3 py-1 flex-col">
<span class="font-bold text-sm">543</span>
<span class="text-gray-500 text-xs">Posts</span>
</p>
<p class="px-3 border-l py-1 flex-col">
<span class="font-bold text-sm">436</span>
<span class="text-gray-500 text-xs">Following</span>
</p>
</div>
</div>
</div>
</div>
<div class="p-4 bg-white shadow mt-4">
<div class="flex items-center">
<i data-feather="map-pin" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800">Lagos, Nigeria</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="calendar" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800">Joined, January 2018</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="link" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800 hover:underline">https://twingle.io</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="globe" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800 hover:underline">https://omike.me</span>
</div>
</div>
<div class="p-4 bg-white shadow mt-4">
<div>
<p class="font-bold">My Skills</p>
</div>
<div class="mt-3">
<ul class="inline">
<li class="inline mr-2">Javascript</li>·
<li class="inline mr-2">PHP</li>·
<li class="inline mr-2">Laravel</li>·
<li class="inline mr-2">NodeJS</li>·
<li class="inline">VueJS</li>
</ul>
</div>
</div>
</div>
<div class="w-full md:w-3/7 lg:w-1/2">
<tabs>
<tab name="Services" :selected="true">
<h1>What we do</h1>
</tab>
<tab name="Pricing">
<h1>How much we do it for</h1>
</tab>
<tab name="About Us">
<h1>Why we do it</h1>
</tab>
</tabs>
</div>
<div class="hidden lg:block md:w-2/6 lg:w-1/4">
<Info/>
</div>
</div>
</div>
</div>
</layout>
</template>
<script>
import Info from '#/Shared/Info'
import Layout from '#/Shared/Layout'
import UserFeed from '#/Components/User/UserFeed'
import Tabs from '#/Components/Tabs'
export default {
components:{
Info,
UserFeed,
Layout,
Tabs,
},
}
</script>
Tabs Component
<template>
<div>
<div class="bg-white shadow rounded px-4 mb-6">
<ul class="list-reset flex pro-tab">
<li class="pro-tab-active py-2">Posts</li>
<li class="ml-6 py-2">Achievements</li>
<li class="ml-6 py-2 hidden sm:block">Activities</li>
</ul>
</div>
<div class="tab-details">
<slot></slot>
</div>
</div>
</template>
<script>
import Tab from '#/components/Tab'
export default {
component:{Tab},
mounted(){
console.log(this.$children);
}
}
</script>
<style>
</style>
Tab Component
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Try adding the Tab component to the ProfileComponent:
components:{
Info,
UserFeed,
Layout,
Tabs,
Tab
},
Even though you've already added it to the Tabs components object, that's not accessible to the template processor when parsing the ProfileComponent, which is where Tab appears. You should also be able to remove the import from the Tabs component.