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.
Related
I'm trying to add a button to the bootstrap table using Vue3, but I ran into the following problem.
The logic of the button is stored in the parent component, and I plan to $emit on the logic from there. But in order for the button to delete a certain row, for example, I need to pass a special ID, I can't pass it to the ID, because I don't understand how to iterate through the data array in the bootstrap table correctly.
Maybe there is a soft and correct way to solve this problem?
ChildComponent.vue
<template>
<div v-if="data.length !== 0">
<div class="card inline" >
<div>
<b-table striped hover :items="data">
<button #click="$emit('remove', hereIneedTheID)">Remove</button>
</b-table>
</div>
</div>
</div>
<div class="card center" v-else>
<h4>No data available in the list</h4>
<button class="btn" #click="$emit('load')">Load list of data</button>
</div>
</template>
<script>
export default {
name: "AppDataList",
emits: ['load', 'remove'],
props: ['data']
}
</script>
I need help to convert jQuery code to Vue js
<div class="single-why" v-for="(single, index) in data" :key="index">
<div class="content">
<h5 class="mt-3">100% Certified </h5>
</div>
<div class="hover-content" style="display:none">
<h5>100% Certified Jewellery</h5>
</div>
</div>
Here I need: when hover on .single-why , need to show .hover-content
as in jQuery
$('.single-why').on('hover', function (){
$(this).children('.hover-content').show()
})
Please suggest me using vue.
Thanks
You use #mouseover and #mouseleave events. In a loop you have to account for element index, so instead of using a boolean to show the hovered element, you use its index.
<div
class="single-why"
v-for="(single, index) in data"
:key="index"
#mouseover="hoverIndex = index"
#mouseleave="hoverIndex = null"
>
<div class="content">
<h5 class="mt-3">100% Certified </h5>
</div>
<div class="hover-content" v-show="hoverIndex === index">
<h5>100% Certified Jewellery</h5>
</div>
</div>
data(){
return {
hoverIndex: null
}
}
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'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.
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