How to hide div element on hover of mouse in Vuejs? - javascript

new Vue({
el: '#mouse',
data: {
showByIndex: null
},
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="mouse">
<div class="parent" v-for="i in 1" #mouseover="showByIndex = i" #mouseout="showByIndex = null">
<div class="child-one">
Some dummy text
</div>
<div class="child-two" v-show="showByIndex === i">
Show me only on hover on "div.parent" element
</div>
</div>
</div>
Working example:- https://codepen.io/dhanunjayt/pen/XWgyqXW
With the above code i am able to show the text, when hover of the div element. But small issue is when hover first element should not reflect.

Like following snipppet?
new Vue({
el: '#mouse',
data: {
showByIndex: null
},
methods: {
}
})
.parent {
padding: 2em;
background: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="mouse">
<div class="parent" v-for="i in 1" #mouseover="showByIndex = i" #mouseout="showByIndex = null">
<div class="child-one" v-show="showByIndex === null">
Some dummy text
</div>
<div class="child-two" v-show="showByIndex === i">
Show me only on hover on "div.parent" element
</div>
</div>
</div>

Related

Vuejs v-bind v-for not populating into component template

with html
<div id="app">
<gallery v-bind:links="['link1.jpg', 'link2.jpg']" />
</div>
and component definition:
Vue.component('gallery', {
template: `
<div v-if="!isReady">
not ready
</div>
<div v-else>
<image-grp v-for="src in links">
<img v-bind:src="src">
</image-grp>
</div>
`,
data() {
return {
links: [],
isReady: false
}
},
mounted() {
this.links = this.$el.getAttribute('links').split(',')
this.isReady = true
console.log(this.links);
}
});
I've managed to produce this html:
<div links="link1.jpg,link2.jpg">
<div class="image">
<img src="">
</div>
<div class="image">
<img src="">
</div>
</div>
The images are not showing up because of the empty src. The src should be filled in during the loop on src in links. The array links must be filled properly, cause the html shows the same number of image-grp elements as are in the links array.
I have tried a variety of ways to populate/bind/mustache the src into the dynamic <img src=""> elements. Any guidance would be appreciated.
I don't see any problems with your code. It works.
But you should better make links to props, like this:
props: ['links']
Then, the other commented out lines are not needed.
Playground
Vue.component('gallery', {
props: ['links'],
template: `
<div v-if="!isReady">
not ready
</div>
<div v-else>
<image-grp v-for="src in links">
<img v-bind:src="src">
</image-grp>
</div>
`,
data() {
return {
//links: [],
isReady: false
}
},
mounted() {
//this.links = this.$el.getAttribute('links').split(',');
this.isReady = true;
}
});
const app = new Vue({
el: '#app'
})
img {
width: 100px;
height: 100px;
margin: 4px;
}
<div id="app">
<gallery v-bind:links="['https://i.stack.imgur.com/NxnaT.jpg?s=256&g=1', 'https://www.gravatar.com/avatar/50309120892edf29dcb2188bdabe3b08?s=256&d=identicon&r=PG']"></gallery>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#^2.0.0/dist/vue.min.js"></script>

Using target.event how to close the dropdown when clicked outside in Vuejs?

const app = new Vue({
el: "#app",
name: 'aselect',
data: {
value: 'Select a Fruit',
list: ["Orange", "Apple", "Kiwi", "Lemon", "Pineapple"],
visible: false
},
methods: {
toggle() {
this.visible = !this.visible;
},
select(option) {
this.value = option;
}
}
})
<div id="app">
<h1>Custom Select Dropdown</h1>
<div class="aselect" :data-value="value" :data-list="list">
<div class="selector" #click="toggle()">
<div class="label">
<span>{{ value }}</span>
</div>
<div class="arrow" :class="{ expanded : visible }"></div>
<div :class="{ hidden : !visible, visible }">
<ul>
<li :class="{ current : item === value }" v-for="item in list" #click="select(item)">{{ item }}</li>
</ul>
</div>
</div>
</div>
</div>
I am using the reference from https://www.npmjs.com/package/vue-click-outside
This is my codepen link https://codepen.io/santoshch/pen/gOmvvmN In the codepen link, i have a dropdown, where after toggling down the dropdown i am unable to close the dropdown list.
So i have searched for some reference i vuejs, And finally found npm package called vue-click-outside, Itried to place event but not sure how to proceed.
I found out a solution to your problem. Follow below steps
At first Add box class to every element that lies inside the box that toggle the dropdown
<div id="app">
<h1>Custom Select Dropdown</h1>
<div class="aselect" :data-value="value" :data-list="list">
<div class="selector box" #click="toggle()">
<div class="label box">
<span class="box">{{ value }}</span>
</div>
<div class="arrow box" :class="{ expanded : visible }"></div>
<div :class="{ hidden : !visible, visible }">
<ul>
<li :class="{ current : item === value }" v-for="item in list" #click="select(item)">{{ item }}</li>
</ul>
</div>
</div>
</div>
</div>
Then add click listener to window in vue.js
const app = new Vue({
el: "#app",
name: 'aselect',
data: {
value: 'Select a Fruit',
list: ["Orange","Apple","Kiwi", "Lemon", "Pineapple"],
visible: false
},
methods: {
toggle() {
this.visible = !this.visible;
},
select(option) {
this.value = option;
},
handleClick(e){
const classname = e.target.className;
if(this.visible && !classname.includes("box")){
this.visible = false;
}
}
},
created () {
window.addEventListener('click', this.handleClick);
},
destroyed () {
window.removeEventListener('click', this.handleClick);
},
})
Check this pen: https://codepen.io/salim-hosen/pen/xxqYYMQ

Get child element on click - Vue JS

I need an equivalent of jQuery "this.find()" to get child element from this section on click.
So on click="showProd(6) I want to find "this .dropProd" inside a method ":
Image
<div class="sections" #click="showProd(6)">
<h2 class="padding-10">Limited Shelf Life</h2>
<div class="dropProd" :class="{ activate : active_el == 6}">
<div v-for="item in shelf" :key="item.id" class="niceBox">
<p class="prod_title">{{item.title}}</p>
<p class="prod_info">{{item.product_details}}</p>
</div>
</div>
</div>
You can use $refs:
<div class="sections" #click="showProd(6)">
<h2 class="padding-10">Limited Shelf Life</h2>
<!-- note the ref attribute below here -->
<div ref="dropProd" class="dropProd" :class="{ activate : active_el == 6}">
<div v-for="item in shelf" :key="item.id" class="niceBox">
<p class="prod_title">{{item.title}}</p>
<p class="prod_info">{{item.product_details}}</p>
</div>
</div>
</div>
Access it in <script> via this.$refs.dropProd
You could just use this.$refs with an appropriate reference name inside your function like this:
new Vue({
el: '#app',
data: function() {
return {
}
},
methods: {
showProd(){
console.log(this.$refs.referenceMe);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="sections"style="background-color: red" #click="showProd(6)">
<h2 class="padding-10">Limited Shelf Life</h2>
<div class="dropProd" ref="referenceMe">
</div>
</div>
</div>

Vue emit ref of another element on click

Hello how i can get the element by className or something else. So i need to get element by className actually but i can't figure out how to do that in this case:
here is my fiddle: https://jsfiddle.net/cihanzengin/aq9Laaew/294154/
Simply i wanna do that: When click to menu in method i try to get element which have classname nav. I tried to make with ref but i can't
here is my code :
<div id="app">
<some-component #get-element="getElement"></some-component>
</div>
<script>
var someComponent = Vue.component("some-component", {
template: `
<div class="columns mobile-navigation">
<div class="column drawer">
<a class="is" #click="$emit('get-element')">MENU</a>
</div>
<div ref="nav" class="column mobile-nav-wrapper">
<p> Some Text </p>
</div>
</div>
`
});
var app = new Vue({
el: '#app',
data: {
},
components: {
"mobile-nav": mobileNav
},
methods: {
getElement() {
console.log(this.$refs.nav);
}
}
});
</script>
You can try something like this.
var classToCheck = 'myclass';
if( this.$refs.nav.classList.includes(classToCheck) ){
// includes above class
}
OR
myclickevent(event){
event.target.classList // this will get you classList of of clicked element then you can compare
}
This contains all the classes for your element
this.$refs.nav.classList
i found the solution:
here is need to add **<some-component>** to ref attribute for accessing to ref inside jsx.
Then will possible to access to nav ref with: this.$refs.someRef.$refs.nav
<div id="app">
<some-component #get-element="getElement" ref="someRef"></some-component>
</div>
<script>
var someComponent = Vue.component("some-component", {
template: `
<div class="columns mobile-navigation">
<div class="column drawer">
<a class="is" #click="$emit('get-element')">MENU</a>
</div>
<div ref="nav" class="column mobile-nav-wrapper">
<p> Some Text </p>
</div>
</div>
`
});
var app = new Vue({
el: '#app',
data: {
},
components: {
"mobile-nav": mobileNav
},
methods: {
getElement() {
console.log(this.$refs.someRef.$refs.nav);
}
}
});
</script>

Condition erros in vue.js

I am trying to check my variable is empty. I think my code looks fine.
But it is not working..
Current my vue.js version is 2.5.13
Below is my code
<template>
<div v-if="Object.keys(this.myValues).length === 0">
is empty
</div>
<div v-else>
good
</div>
</template>
<script>
export default {
data: function() {
return {
myValues: new Object()
};
}
};
</script>
This is the working example data refers to current template so remove this
var app = new Vue({
el: '#el',
data: function() {
return {
myValues: new Object(),
another: {some:'value'}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="el">
<div v-if="Object.keys(myValues).length === 0">
myValues is empty
</div>
<div v-else>
myValues have some element
</div>
<div v-if="Object.keys(another).length === 0">
Another is empty
</div>
<div v-else>
Anoter have some element
</div>
</div>

Categories