Pass links array from parent to child in vue (create links menu) - javascript

I'm trying to create a menu in vue.js. I have 2 components - Navigation and NavLink.
I created an array of links in App.vue file and passed it as a props to Navigation component.
In the Navigation component I'm using NavLink to create the li element for each item in the array.
App.vue
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<app-nav></app-nav>
<hr />
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
export default {
components: {
"app-nav": Navigation
}
};
</script>
<style>
</style>
Navigation.vue
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<nav-link v-for="link in links"></nav-link>
</ul>
</div>
</nav>
</template>
<script>
import NavLink from "./NavLink.vue";
export default {
data() {
return {
links: ["Home", "Login", "Shop"]
};
},
components: {
"nav-link": NavLink
}
};
</script>
<style>
</style>
NavLink.vue
<template>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
</template>
<script>
export default {
props: ["links"]
}
</script>
<style>
</style>
It actually create 3 elements of 'NavLink' but the link title itself is empty, how can I pass the title of array items to the NavLink component?

You need to pass a title prop in NavLink component
Navigation.vue
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<nav-link v-for="link in links" :title="link"></nav-link>
</ul>
</div>
</nav>
</template>
<script>
import NavLink from "./NavLink.vue";
export default {
data() {
return {
links: ["Home", "Login", "Shop"]
};
},
components: {
"nav-link": NavLink
}
};
</script>
<style>
</style>
NavLink.vue
<template>
<li class="nav-item">
<a class="nav-link" href="#">{{ title }}</a>
</li>
</template>
<script>
export default {
props: ["title"]
}
</script>
<style>
</style>

Related

How can I create dynamic menu with submenu in vue 2?

I have a problem and if you can help me I would be grateful, because I am working with vue for 3 weeks.
I try to create a menu with submenu in vue 2 by two weeks and I can't succeed. the menu is created , but when I go to submenu is won't create it. the code is next:
<script>
import image from "./assets/img/logo-just-escape.png"
import axios from "axios"
export default {
data(){
const lang = localStorage.getItem('lang')
return {
imagel: image,
lang: lang,
languages:null,
menu:null,
submenu:null
}
},
async created(){
try {
var res =await axios.get(`lng`);
this.languages=res.data;
const valmenu="titles/value?language="+this.lang;
res=await axios.get(valmenu);
this.menu=res.data;
this.submenu=this.getSubMnu(this.menu);
console.log(this.submenu)
}catch(e){
console.error(e);
}
},
methods: {
handleChange(event){
localStorage.setItem('lang',event.target.value);
window.location.reload();
},
getSubMnu(value){
let temp='';
let sbmenu=[];
let variable=null;
for(temp in value){
if('2'==value[temp].subtitle){
variable=value[temp];
let temp1=value[temp].link+"\/"+this.menu[temp].id;
variable.link=temp1;
sbmenu.push(variable);
}
}
return sbmenu;
}
}
}
</script>
<template>
<div id="app" class="bg-dark">
<div>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/">
<img width="100" height="50" :src="imagel"/>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<div v-for="menuButton in this.menu" :value="menuButton.title" :key="menuButton.id">
<li class="nav-item" v-if="menuButton.subtitle ===0">
<router-link :to="menuButton.link" ><span class="nav-link">{{menuButton.title}}</span></router-link>
</li>
<li class="nav-item dropdown" v-if="menuButton.subtitle ===1" style="color: white;">
<span class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{menuButton.title}}</span>
<div v-for="tempor in this.submenu" class="dropdown-menu dropdown-menu-right bg-dark" :value="tempor.title" :key="tempor.id">
<span class="nav-link">{{tempor.title}}</span>
<router-link :to="tempor.link" #click.name><span class="nav-link">{{tempor.title}}</span></router-link>
</div>
</li>
</div>
<li class="nav-item">
<select class="selectpicker form-control" v-model="lang" data-width="fit" #change="handleChange($event)">
<option v-for="langu in languages" :value="langu.language_short" :key="langu.id">
{{langu.language}}
</option>
</select>
</li>
</ul>
</div>
</nav>
<div class="divmargin" >
<router-view/>
</div>
</div>
</div>
</template>
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'submenu' of undefined"
found in
---> at src/App.vue
If someone can give me some answer to this I will be very grateful.
Thank you,
Vlad.

How to change template with vue.js?

I am a beginner of vue.js, now I try to set up a website with dynamic tab.
I have some problem when changing different tab with different template.
But I face a problem, when I click the ul element in my website to change another template, it shows error as following:
It seems like template included error.
<template id="switchhover">
<div>
<div class="menu">
<div class="title">
<img src="../assets/title.jpg" class="min_picture">
<span>Hello</span>
</div>
<ul>
<li #click="changeView('Home')" class="liststyle">Home(首頁)</li>
<li #click="changeView('WorkExperience')" class="liststyle">Work Experience(工作經歷)</li>
<li class="liststyle">Project Experience(專案經歷)</li>
<li class="liststyle">Portfolio(作品集)</li>
<li class="liststyle">Photo(相片)</li>
<li class="liststyle">
<router-link :to="{path: '/'}">Back to Navigation Page<br>(回導覽頁)
</router-link>
</li>
</ul>
<div class="link">
<a href="https://www.facebook.com/profile.php?id=100001824960776">
<div class="fb"></div>
</a>
<a href="https://github.com/PefyLi">
<div class="github"></div>
</a>
<a href="https://www.linkedin.com/in/grant-li-3a6680150/">
<div class="linkedin"></div>
</a>
</div>
</div>
<div class="content">
<div class="banner">
<div>
<div class="picture">
<img src="../assets/title.jpg" class="bar_picture">
</div>
<div>
<span style="font-size:35px;margin-right:29px">Hello</span>
<span>Hello</span><br><br><br><br>
</div>
</div>
</div>
<component :is="currentTab" keep-alive></component>
</div>
</div>
</template>
<script>
import Home from './Home';
import WorkExperience from './WorkExperience';
export default {
data(){
return{
currentTab:Home
}
},
methods:{
changeView: function(viewName) {
this.currentTab = viewName
}
},
components: {
Home:{ template: Home},
WorkExperience:{ template: WorkExperience}
},
};
</script>

Why anchor tag is taking extra white space?

I am working on react project, In that I have an anchor tag, then I have a navbar.
The problem is anchor tag is pushing navbar to right side. Because anchor tag is taking the extra white space.
I've even tried to use display: 'inline-block', and it isn't working.
Navbar.js
import React, { Component } from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';
class Navbar extends Component {
render() {
return (
<div className='container-fluid custom'>
<div className='container'>
<div className='row'>
<div className='col-12'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand space" href="www.facebook.com">
<div className='logo'>
<img src='assets/images/kaboom.png' alt='logo'></img>
</div>
</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<Link className='nav-link' to='/'>Home</Link>
</li>
<li className="nav-item">
<Link className='nav-link' to='/register'>Register</Link>
</li>
<li className="nav-item">
<Link className='nav-link' to='/login'>Login</Link>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
)
}
}
export default Navbar
This is Navbar.css
.logo {
width: 10%;
display: inline-block;
}
.logo img {
width: 100%;
}
.space {
display: inline-block !important;
}
it would be better if you could provide us a snippet or something but anyway
you can find out what causing the white space using any browser's developers tools
it might be a margin or padding, just open it and point to your element to find out and then you can resolve the issue by applying margin:0 or padding:0 to that element
hope I could be a help!
Don't use div inside of anchor tag. Just wrap the logo in an anchor tag and give whatever width to that img tag.
Like this:
<a className="navbar-brand space" href="www.facebook.com">
<img src='assets/images/kaboom.png' width="150" alt='logo'></img>
</a>

How to use JavaScript with $ inside render() in Reactjs

I work on content editor in React admin interface.
And I'd love to install my favorite block content editor. But it's an old one and have no react version.
I know how to link .js and .css in head with ReactHelmet
But have no idea how to run following script:
<script>
$(function () {
$("#editor").brickyeditor({
ignoreHtml: true,
blocksUrl: 'data.json',
templatesUrl: 'templates.html',
onChange: function(data) {
console.log(data.html);
}
});
});
</script>
Here is initial html structure
<body>
<header>
<nav class="container navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">BrickyEditor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="editor"></div>
</div>
</div>
</div>
</div>
</main>
</body>
Im using it like so:
import PageTitle from "../components/common/PageTitle";
import Helmet from "react-helmet";
import $ from 'jquery';
class NewsEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const {
} = this.state;
return (
<Container fluid className="main-content-container px-4">
{/* Page Header */}
<Row noGutters className="page-header py-4">
<PageTitle sm="4" title="News editor" subtitle="Drag and drop interface" className="text-sm-left" />
</Row>
<Helmet
title="Nested Title"
link={[
{"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.css"}
]}
script={[
{"src": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.js"},
]}
/>
<header>
<script>
$(function () {
$("#editor").brickyeditor({
ignoreHtml: true,
blocksUrl: 'data.json',
templatesUrl: 'templates.html',
onChange: function(data) {
console.log(data.html);
}
});
});
</script>
<nav class="container navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">BrickyEditor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="editor"></div>
</div>
</div>
</div>
</main>
</Container>
);
}
}
export default NewsEditor;
On this stage all I have is Failed to compile error.
UPD: Following advices I keep on getting TypeErrors
I always make re-usable components for external libraries. So in your case, it would be BrickyEditor component which could look like this:
class BrickyEditor extends React.Component {
editorRef = React.createRef();
componentDidMount() {
window.$(this.editorRef.current).brickyeditor(this.props);
}
render() {
return <div ref={this.editorRef}></div>
}
}
// in your NewsEditor component you can use it like so
<BrickyEditor
ignoreHtml={true}
blocksUrl="data.json"
templatesUrl="templates.html"
onChange={function(data) {
console.log(data.html);
}}
/>

tag navbar does not work in Reactjs

I'm still new in javascript especially in reactjs. I have a problem when creating a web header. I want to put the menu on the right and I use . But it does not work, the menu stays on the left. I am using bulma for css. Can anyone help?
import React, { Component } from 'react';
import './Header.css';
import { Link } from 'react-router-dom';
class Header extends Component {
render() {
return (
<div className="nav has-shadow">
<div className="container">
<div className="nav-left">
<a className="nav-item">MyCompany</a>
</div>
<span className="nav-toggle" >
<span></span>
<span></span>
<span></span>
</span>
<div className="nav-right nav-menu">
<Link to="/" className="nav-item r-item">Home</Link>
<Link to="/faq" className="nav-item r-item">Features</Link>
<Link to="/faq" className="nav-item r-item">About</Link>
<Link to="/faq" className="nav-item r-item">faq</Link>
<div className="nav-item">
<p className="control">
<a className="button is-primary is-outlined">
<span className="icon">
<i className="fa fa-download"></i>
</span>
<span>Join Now</span>
</a>
</p>
</div>
</div>
</div>
</div>
);
}
}
export default Header;
Use navbar-end class to place your menu contents right side like
<nav class="navbar">
<div class="navbar-end">
<div class="navbar-item">
<!-- Your content here -->
</div>
</div>
</nav>
For documentation about header/navbar in Bulma CSS refer Navbar | Bulma

Categories