I'm new in VueJS and I'm try to do something like this
I have 3 components, siderbar ; siderbar-item and sidebar-drop
siderbar.vue is a wrapper when you can put siderbar-item and sidebar-drop, and inside sidebar-drop you can put sidebar-item too
for example:
<sidebar>
<sidebar-item url="myurl" title="Dashboard" icon="fas fa-tachometer-alt" badge=""></sidebar-item>
<sidebar-drop title="News" icon="fas fa-tachometer-alt">
<sidebar-item url="myurl_news" title="News list" icon="fas fa-tachometer-alt" badge=""></sidebar-item>
<sidebar-item url="myurl_news_add" title="Add News" icon="fas fa-tachometer-alt" badge=""></sidebar-item>
</sidebar-drop>
<sidebar-drop title="Categories" icon="fas fa-tachometer-alt">
<sidebar-item url="myurl_categories" title="Categories List" icon="fas fa-tachometer-alt" badge=""></sidebar-item>
</sidebar-drop>
</sidebar>
sidebar.vue is very simple:
<aside>
<slot></slot>
</aside>
sidebar-item.vue
<template>
<ul class="menu-list" >
<li>
<a :href="url" :class="{'is-active': is_active }">
<span class="icon"><i v-if="icon" :class="icon"></i></span>
{{ title }}
<span v-if="badge" class="button badge is-info is-small is-pulled-right "> {{ badge }}</span>
</a>
</li>
</ul>
</template>
<script>
export default {
props: ['title', 'url', 'icon', 'badge'],
data() {
return {
is_active: this.$current_url === this.url
}
}
}
</script>
and sidebar-drop.vue
<template>
<ul class="menu-list" v-if="title">
<li #click="openMenu" :class="{'is-open': is_open}">
<a class="">
<span v-if="icon" class="icon"><i class="fas fa-tachometer-alt"></i></span>
{{ title }}
<span class="badge is-pulled-right" style=""> <i class="fas fa-chevron-left"></i> </span>
</a>
<slot></slot>
</li>
</ul>
</template>
<script>
export default {
props: ['title', 'icon'],
data() {
return {
is_open: false,
}
},
methods: {
openMenu(){
this.is_open = !this.is_open;
},
}
}
</script>
It works great, but I have a little problem. If you notice, sidebar-item has a data called "is_active", it only put a CSS class that this item is active. Great.
Now I'm trying to get into sidebar-drop if a least one of his children has data "is-active" in true, change the is_open sidebar-drop parent data to true.
Example: I click "News" item.
Ul li News is active... works!
Ul li parent drop is open... don't work
Is possible make that?
Thanks everyone!
Update:
I put it in Fiddler to more clear:
https://jsfiddle.net/h35qy2zs/
I do in sidebar-item a random is_active.
If any child of sidebar-drop (sidebar-item's) data is_active:true, sidebar-drop data is_open is true too.
So, it show in color yellow and open
Result:
But now, both are closed at refresh page.
Related
I have the following vue component:
<template>
<div class="message__overlay">
<div class="message__overlay-content">
<div class="message__overlay-content-top">
<span class="message__overlay-close" #click="hideMessage"></span>
<h2>{{ title }}</h2>
<div v-html="content"></div>
</div>
<div class="message__overlay-content-bottom">
<a :href="`tel:${phoneNumber}`" class="message__overlay-link">Call Customer Services</a>
</div>
</div>
</div>
</template>
<script>
import SiteConstants from '../../Constants/site-constants.js';
import './styles.scss';
export default {
name: 'MessageOverlay',
props: {
title: {
default: '',
type: String,
},
phoneNumber: {
default: '',
type: String,
},
},
methods: {
hideMessage() {
document.body.classList.remove(SiteConstants.Classes.MessageOpen, SiteConstants.Classes.OverlayOpenWithPhoneLink);
},
}
};
</script>
Which I can use by registering and doing the following:
<message-overlay :title="'Notice!'" :phone-number="0123456789">
<p>To place orders, an agreement needs to be in place for new projects. </p>
<p>Please call our dedicated customer service team who will be happy to discuss and set this agreement up for future orders.</p>
</message-overlay>
How do I get the 2 paragraph tags (or any content between the message-overlay tags) in the child component to render in the div with v-html="content" of the parent component template?
You need to add a slot to your message-overlay component
<template>
<div class="message__overlay">
<div class="message__overlay-content">
<div class="message__overlay-content-top">
<span class="message__overlay-close" #click="hideMessage"></span>
<h2>{{ title }}</h2>
<div v-html="content">
<slot></slot>
</div>
</div>
<div class="message__overlay-content-bottom">
<a :href="`tel:${phoneNumber}`" class="message__overlay-link">Call Customer Services</a>
</div>
</div>
</div>
</template>
https://v2.vuejs.org/v2/guide/components-slots.html
I want to implement a pagination component b-pagination w/bootstrap-vue but it will only display page one. I am following the setup in documentation but they only show an example using a table not an unordered list. I have :
<template>
<div class="results overflow-auto" v-cloak>
<h3>Search Results</h3>
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<template v-slot:header>
<h1>NASA Image</h1>
</template>
<template v-slot:body>
<b-img class="modal-image" v-bind:src="attribute"></b-img>
</template>
</modal>
<!-- ======== Pagination Markup ============ -->
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
:items="items"
aria-controls="my-list"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<!-- ==========End Pagination Markup ======== -->
<!-- Limit output to 100 items -->
<ul
class="search-results"
id="my-list"
>
<li v-for="(item, index) in propsResults.items.slice(0,100)" :key="index">
{{ item.data[0].title}}
<span>
<b-img
thumbnail
class="thumbnail"
:src="item.links[0].href"
alt="Fluid image"
id="show-modal"
v-on:click="imageModal"
></b-img>
</span>
</li>
</ul>
</div>
</template>
and my javascript is :
export default {
name: "SearchResults",
props: ["propsResults"],
data() {
return {
showModal: false,
attribute: "",
perPage: 10,
currentPage: 1,
items: this.$props.propsResults.items
};
},
computed: {
rows() {
return this.$props.propsResults.items.length;
}
}
The pagination component is displaying all 100 items of items array on one page. I should also note I do not see the items array in the b-pagination props object per Vue dev tools in FF. is this normal? Any insight appreciated..
You should still be using currentPage to choose which items to show. The b-pagination component only changes that number.
Try using this line:
<li v-for="(item, index) in items.slice(10*(currentPage-1),10*(currentPage))" :key="index">
I have a div that when i want hover to it, it will show other div. However, my first div is dynamic, it has an ID. So how will i able to hover to ID based on its ID?
It should be #mouseenter="hoverService{{services.id}} = true" but it causes error. So i made the code below to just static.
Here's my code below:
<template>
<div
class="col-md-3"
v-for="(services, index) in servicesFiltered"
:key="index"
#mouseenter="hoverService = true"
#mouseleave="hoverService = false"
>
<div class="service_background" v-if="hoverService">
<div class="mb-1" v-for="(sub_services, index) in services.menu_items" :key="index">
<router-link
:to="{ path: `/${sub_services.data}`}"
>
<a
href="#"
class="btn btn-outline-primary w-100 services_button"
>{{sub_services.text }}</a>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hoverService: false
};
}
};
</script>
Try this code
https://codesandbox.io/s/y7p9qyyovz
You need to maintain hover for each item you can not manipulate using single variable for multiple items.
I have a component on my parent page like so:
Detail.vue
Template:
<feature-list :description="description"></feature-list>
Script:
axios.get(`my/end/point`)
.then(res => {
this.description = res.data.product.description
})
.catch(function (error) {
console.log('error', error)
})
Features.vue
Template:
<component :is="subcomponent" :height="overallHeight" :width="overallWidth" :length="overallLength"></component>
Script:
components: {
subcomponent: {
props: ['overallHeight', 'overallWidth', 'overallLength'],
/* template: this.description */
}
}
Expected return value from this.description:
<el-row :gutter="30">
<el-col :sm="24">
<ul class="dimensions d-flex">
<li class="dimension">
<img src="/length.jpg" alt="">
<h4 class="title">Length</h4>
<p class="base-copy">{{length}}</p>
</li>
<li class="dimension">
<img src="/height.jpg" alt="">
<h4 class="title">Height</h4>
<p class="base-copy">{{height}}</p>
</li>
<li class="dimension">
<img src="/width.jpg" alt="">
<h4 class="title">Width</h4>
<p class="base-copy">{{width}}</p>
</li>
</ul>
</el-col>
</el-row>
How can I send the template to the component? and render the values (lenth, width and height)
Something like this, only difference being, the template comes from an ajax call.
After some digging, I've found a way to solve this, the idea is to pass the template and the props as an object to the is prop.
The code will look like this,
<component
:is="description && { template: `<div>${description}</div>`, props: ['height', 'width', 'length'] }"
:height="overallheight"
:width="overallwidth"
:length="overalllength">
</component>
I am trying to hide and show a font awesome 5 icon on click. The value changes behind the scene but the icon isn't being changed. I have tried the other class bindings that vue js has to offer but it produced the same result.
<template>
....
<a href="#" class="social-button" #click.prevent="showAttribute(index)" rel="tooltip" data-color-class="primary" data-animate="animated fadeIn" data-original-title="" data-toggle="tooltip" data-placement="bottom">
<i class="fa fa-eye" v-if="category.attributes[index].show"></i>
<i class="fa fa-eye-slash" v-else></i>
</a>
....
</template>
<script>
export default {
...
showAttribute(index){
this.category.attributes[index].show = !this.category.attributes[index].show;
},
...
}
</script>
try with this v-if="!category.attributes[index].show" instead fo v-else
<template>
....
<a href="#" class="social-button" #click.prevent="showAttribute(index)" rel="tooltip" data-color-class="primary" data-animate="animated fadeIn" data-original-title="" data-toggle="tooltip" data-placement="bottom">
<i class="fa fa-eye" v-if="category.attributes[index].show"></i>
<i class="fa fa-eye-slash" v-if="!category.attributes[index].show"></i>
</a>
....
</template>
<script>
export default {
...
showAttribute(index){
this.category.attributes[index].show = !this.category.attributes[index].show;
},
...
}
</script>
onPage load if you don't get the value or if you get the value null. then, you need to set the default value in the data()
here is the working example, https://codepen.io/anon/pen/rvqYgz