How to call VueJS component from another component - vue.js

I'm new to VueJS, i have different pages which i organized in 'components'. Now, different pages have different layouts, for example, some pages will not include the header and the footer (which are also individual components).
This is the code for a component that is supposed to include the header
<template>
<Header />
<div class="container main-content">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/dashboards" class="">
<i class="fa fa-user fa-4x"></i>
<p>View Dashboards</p>
</router-link>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/home" class="">
<i class="fa fa-cogs fa-4x"></i>
<p>Manage Settings</p>
</router-link>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</template>
<script>
import Header from './Header.vue'
export default{
name: 'Loyalty',
components:{
'Header': Header
}
}
</script>
And this is my Header.vue
<template>
<div>
<div class="head">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<span class="pull-left" style="padding-left: 10px;">
<router-link to="/home" class="header-text page-link"><span class="fa fa-arrow-left"></span> Home</router-link>
</span>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 custom-hidden-sm">
<span class="pull-right" style="padding-right: 10px;">
<span class="header-text">Waje Loyalty</span>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
name: 'Header',
data(){
return{
page_name: this.$router.currentRoute.name
}
}
}
</script>
When i compile, i get the error:
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
How can i solve this?

The issue is caused by the two root elements in your Loyalty.vue template: <Header /> and <div class="container main-content">.
VueJS component templates can contain one and only one root node.
To solve this, wrap the content of your Loyalty.vue template with a root div.
<template>
<!-- root div -->
<div>
<Header />
<div class="container main-content">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/dashboards" class="">
<i class="fa fa-user fa-4x"></i>
<p>View Dashboards</p>
</router-link>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/home" class="">
<i class="fa fa-cogs fa-4x"></i>
<p>Manage Settings</p>
</router-link>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
</template>

Related

How to make prettier format HTML like this?

What prettier rules do I need to make the formatting like this. To keep the tags on new lines and the text between them?
<template>
<div class="row">
<div class="col-sm-6 col-lg-8">
.col-sm-6 .col-lg-8
</div>
<div class="col-6 col-lg-4">
.col-6 .col-lg-4
</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
</div>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>

Vue RouterLink not working inside a component

I have a very simple vue 3 project. In created a Layout component that has the navigation links which looks like this
<script setup>
import { useRouter } from "vue-router";
</script>
<template>
<div>
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
<div
class="flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white"
>
<div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4">
<h1 class="text-3xl font-extrabold text-gray-900">MiniSend</h1>
</div>
<nav class="mt-5 flex-1 px-4 bg-white space-y-2">
<ul>
<li class="mb-4">
<RouterLink to="/dashboard" class="text-gray-700">
Dashboard</RouterLink
>
</li>
<li class="mb-4">
<RouterLink to="/settings" class="text-gray-700">
Settings</RouterLink
>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md:pl-64 flex flex-col flex-1">
<main class="flex-1">
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-semibold text-gray-900">
<slot name="pageTitle"></slot>
</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div class="py-4">
<slot></slot>
</div>
</div>
</div>
</main>
</div>
</div>
</template>
In my Dashboard view I imported the Layout component as seen below
<script setup>
import Layout from "../components/Layout.vue";
</script>
<template>
<Layout>
// ...content
</Layout>
</template>
When the Dashboard view is served, I can see the links but I cannot click the links. I copied the same link code into the Dashboard view file and I was able to click and get routed to the right page.
Why are the links not working inside the component but work inside the view?

Build v-for src image

I'm doing a VUE 3 project and I have problems with v-for src image. I have the next code:
<template>
<div class="container">
<h2 class="title">Ăšltimas incorporaciones</h2>
<div class="row">
<div
class="col-sm-6 col-md-4 col-lg-3"
v-for="pet in pets"
:key="pet.nombre"
>
<article class="card">
<div class="card-header">
<img
class="card-img-top"
v-bind:src="'../assets/pets/' + pet.imatge"
alt="Thor"
/>
</div>
<div class="card-body">
<div class="card-main">
<!-- <h3 class="card-title">{{ pet.nombre }}</h3> -->
<h3 class="card-title">{{ pet.nombre }}</h3>
<p class="card-text">{{ pet.ciudad }}</p>
</div>
<ul class="card-icons">
<li>
<img
class="card-icon"
src="../assets/icons/icon_cat.svg"
alt="Gato"
/>
</li>
<li>
<img
class="card-icon"
src="../assets/icons/icon_male.svg"
alt="Macho"
/>
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</template>
I want a v-for to show the images to each card. The pet.nombre and pet.ciudad is working good, but pet.image not.
My script is like this:
<script>
export default {
name: "PetList",
data() {
return {
pets: [
{
nombre: "Thor",
ciudad: "Barcelona",
imatge: "thor.png",
},
};
},
};
How can I show the images with this code?
You can use
<img class="card-img-top"
:src="`../assets/pets/${pet.image}`"
:alt="pet.nombre"
/>

Header component is not registered first time properly

I want to showing profile on click for logged in user, when i click to that, my profile page is rendered, but header content is not loaded properly, i checked in console, it shown me an error, did you register component properly. but if i refresh or reload page, header content is showing and console error also cleared that showing did you register component properly.
please help me where i mistaken.
header.vue
<template>
<div>
<div class="top-header">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Free shipping on all orders over $100</p>
</div>
<div class="col-md-6">
<div class="links" v-if="!this.$page.auth.user">
<inertia-link :href="route('login.page')"> Log in </inertia-link>
<InertiaLink :href="route('RegistrationForm')">Register</InertiaLink>
</div>
<div class="id-link" v-else>
<div class="profile-content" #click="OpenProfile"> <b-link href="#"> Welcome {{this.$page.auth.user.name}} </b-link> </div>
<div class="profile" v-if="expanded">
<b-img src="/images/profile.jpg" alt="image"></b-img>
<ul>
<li> <b-button variant="primary"> <inertia-link :href="route('User-Profile')" method="get"> Profile </inertia-link> </b-button> </li>
<li> <b-button variant="primary"> <inertia-link :href="route('logout')" method="post"> Logout </inertia-link> </b-button> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<header>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="logo">
<img src="images/logo.png">
</div>
</div>
<div class="col-md-9">
<div class="navbar">
<ul>
<li> <InertiaLink :href="route('home')">Home</InertiaLink> </li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Single</li>
<li> <inertia-link :href="route('Contact-Us')">Contact US</inertia-link> </li>
</ul>
</div>
</div>
</div>
</div>
</header>
</div>
</template>
<script>
import Dropdown from '#/Shared/Dropdown'
import Icon from '#/Shared/Icon'
import Profile from './Profile.vue'
export default {
components: {Dropdown,Icon,Profile},
data() {
return{
expanded:false,
profile:false,
}
},
methods:{
OpenProfile(){
if(this.expanded==false){
this.expanded=true;
}
else{
this.expanded=false;
}
},
}
}
</script>
profile.vue
<template>
<div class="contact-page">
<div>
<header-content> </header-content>
</div>
<div class="table-content">
<b-container>
<div class="table-heading">
<h1>User Profile</h1>
</div>
<b-row>
<b-col cols="3">
<div class="login-id">
<div class="id-img">
<b-img src="images/profile.jpg"></b-img>
</div>
<h2>{{this.$page.auth.user.name}}</h2>
</div>
</b-col>
<b-col cols="9">
<div class="table-area">
<div class="out-layer">
<div class="head">
<h4>User Information</h4>
</div>
<b-link>
<div class="pencil">
<b-img src="images/edit.png"></b-img>
</div>
</b-link>
</div>
<div class="user">
<b-row no-gutters>
<b-col cols="6"><span class="text">NAME</span></b-col>
<b-col cols="6"><span class="link">{{this.$page.auth.user.name}}</span></b-col>
</b-row>
</div>
</div>
</b-col>
</b-row>
</b-container>
</div>
<div>
<footer-content> </footer-content>
</div>
</div>
</template>
<script>
import HeaderContent from './Header.vue';
import FooterContent from './Footer.vue';
export default {
components: {HeaderContent,FooterContent},
data(){
return {
}
},
}
</script>
I see an error in profile.vue, you don't have to use this inside <template>.
Are other components you call in profile.vue registered correctly?
Try to remove some portions of code to debug which tags throw the error.

Template is not loading showing error [Vue warn]: Error compiling template:

I'm loading default listing using vuejs. When I browse page it show me following error
[Vue warn]: Error compiling template:
My html template is as bellow:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
I'm using API to get data. When I inspected API response it's showing me response correctly but vuejs is not showing data in template. My VueJs code is as bellow:
Vue.component('Results',{
template : '#results-template',
props: ['books','genres']
})
and VueJs method is as bellow:
getBooks : function(){
var vm = this;
return $.get('apis.php?gtype=Books')
.done(function(d){
vm.books = JSON.parse(d);
});
}
My created on loading page code is as bellow:
created : function(){
var vm = this;
this.getBooks().done(function(){
........
});
}
Code for data :
data : {
books : []
}
Please help me what's wrong I'm doing?
Your are binding image incorrect way first of all make it correct. Replace your code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img :src="category.URL" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
with this code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
You've to use :src="category.URL" for image src binding not :src="{{category.URL}}"
Secondly in template call you are using "genres" have you initialized genres array or not? this may also cause for error. 1st check both of causes if problem not solved the check further.