I want to hide the below loader-wrapper div after 2 seconds of page load.
<div class="loader-wrapper">
<div class="loader"><div class="loader-inner"></div></div>
</div>
Can someone help me on achieving this ?
You could add a property in the data object and use v-show directive to determine whether the element should be visible or not.
If the boolean is false the element is hidden, if true the element is visible.
Method Created called synchronously after the instance is created.
<template>
<div>
<h1 v-show="elementVisible" class="hideElement"> HELLO </h1>
</div>
</template>
<script>
export default {
data() {
return {
elementVisible: true
}
},
created() {
setTimeout(() => this.elementVisible = false, 2000)
}
}
</script>
<template>
<!-- binding style -->
<div class="loader-wrapper" :style="{visibility: showLoader ? 'visible' : 'hidden' }"
<!-- or use v-show directive to show | hide element -->
<div class="loader-wrapper" v-if="showLoader">
<div class="loader"><div class="loader-inner"></div></div>
</div>
</template>
<script>
data() {
showLoader: true,
},
mounted() {
this.hideLoader()
},
methods: {
hideLoader() {
// using setTimeout to programmatically hide loader
setTimeout(() => {
this.showLoader = false
}, 2000)
}
}
</script>
You can write the logic to hide the loader in mounted() hook. Vue calls the mounted() hook when your component is added to the DOM.
Working Demo :
new Vue({
el: '#app',
data: {
isLoaderVisible: true,
},
mounted() {
setTimeout(() => {
this.isLoaderVisible = false
}, 2000)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="loader-wrapper" v-if="isLoaderVisible">
<div class="loader">
<div class="loader-inner">
Loading...
</div></div>
</div>
</div>
Related
Here is my code:
<div class="pop-up-chat">
<div id="div1">
<div class="pop-up-msg regular-text">Hi, How may I help you?</div>
<div class="triangle-down"></div>
</div>
</div>
Here I am targeting the pop-up-chat div and setting 5 seconds delay and hiding the div. What's wrong with it?
export default {
name: 'PopUpMsg',
mounted() {
this.msgShow();
},
methods: {
msgShow() {
const msg = document.getElementsByClassName('pop-up-chat');
setTimeout(() => {
msg.style.visibility = 'hidden';
}, 5000);
},
},
}
Just add new property to data showPopup and set it to true then change it to false within mounted hooks
Using v-show to show or hide the wanted element v-if-vs-v-show
<template>
<div>
<!-- binding style -->
<div :style="{visibility: showPopup ? 'visible' : 'hidden' }"
<!-- or use v-show directive to show | hide element -->
<div v-show="showPopup" class="pop-up-chat">
<div id="div1">
<div class="pop-up-msg regular-text">Hi, How may I help you?</div>
<div class="triangle-down"></div>
</div>
</div>
<!-- The rest of your template -->
</div>
</template>
<script>
export default {
name: 'PopUpMsg',
data() {
return {
showPopup: true,
}
}
mounted() {
this.msgShow();
},
methods: {
msgShow() {
setTimeout(() => {
this.showPopup = false
}, 5000)
},
},
}
</script>
Or you can create custom directive v-visible
<div v-visible="showPopup" />
Vue.directive('visible', function(el, binding) {
el.style.visibility = Boolean(binding.value) ? 'visible' : 'hidden';
});
As you are working with Vue.js, I will suggest you to use v-show directive to show and hide the popup.
Demo:
new Vue({
el: '#app',
data: {
isVisible: true
},
mounted() {
this.poppupShow();
},
methods: {
poppupShow() {
setTimeout(() => {
this.isVisible = false;
}, 5000);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="pop-up-chat" v-show="isVisible">
<div id="div1">
<div class="pop-up-msg regular-text">Hi, How may I help you?</div>
<div class="triangle-down"></div>
</div>
</div>
</div>
It works this way
methods: {
msgShow() {
const msg = document.getElementById('msg');
setTimeout(() => {
msg.style.display = 'block';
setTimeout(() => {
msg.style.display = 'none';
}, 10000);
}, 5000);
},
},
.pop-up-chat {
display : none; //initially
}
I'm working with BootstrapVue. To my problem: I have a v-for in my template in which I have two buttons.
Looping over my v-for my v-if doesn't generate unique IDs and than after clicking one button each button will be triggered (from Open me! to Close me! and other way around).
How can I manage to get each button only triggers itself and doesn't affect the other?
I think I have to use my n of my v-for but I actually don't know how to bind this to a v-if..
Thanks in advance!
<template>
<div>
<div v-for="n in inputs" :key="n.id">
<b-button v-if="hide" #click="open()">Open me!</b-button>
<b-button v-if="!hide" #click="close()">Close me! </b-button>
</div>
<div>
<b-button #click="addInput">Add Input</b-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
id: null,
inputs: [{
id: 0
}],
hide: true,
};
},
methods: {
open() {
this.hide = false
},
close() {
this.hide = true
},
addInput() {
this.inputs.push({
id: this.id += 1;
})
}
}
};
</script>
Everything seems to look fine. In order to handle each button triggers,
you can maintain an object like so:
<script>
export default {
data() {
return {
inputs: [{id: 0, visible: false}],
};
},
methods: {
open(index) {
this.inputs[index].visible = false
},
close(index) {
this.inputs[index].visible = true
},
addInput() {
this.inputs.push({id: this.inputs.length, visible: false});
}
}
};
</script>
and your template should be like
<template>
<div>
<div v-for="(val, index) in inputs" :key="val.id">
<b-button v-if="val.visible" #click="open(index)">Open me!</b-button>
<b-button v-if="!val.visible" #click="close(index)">Close me! </b-button>
</div>
</div>
</template>
Edit:
You don't need to insert an id every time you create a row, instead can use the key as id. Note that the inputs is an object and not array so that even if you want to delete a row, you can just pass the index and get it removed.
I would create an array of objects. Use a boolean as property to show or hide the clicked item.
var app = new Vue({
el: '#app',
data: {
buttons: []
},
created () {
this.createButtons()
this.addPropertyToButtons()
},
methods: {
createButtons() {
// Let's just create buttons with an id
for (var i = 0; i < 10; i++) {
this.buttons.push({id: i})
}
},
addPropertyToButtons() {
// This method add a new property to buttons AFTER its generated
this.buttons.forEach(button => button.show = true)
},
toggleButton(button) {
if (button.show) {
button.show = false
} else {
button.show = true
}
// We are changing the object after it's been loaded, so we need to update ourselves
app.$forceUpdate();
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div>
<div v-for="button in buttons" :key="button.id">
<button v-if="button.show" #click="toggleButton(button)">Open me!</button>
<button v-if="!button.show" #click="toggleButton(button)">Close me! </button>
</div>
</div>
</template>
</div>
Is there a way to bind a given data prop in template while looping over array?
<div v-for="(page, pageIndex) in pages" :key="pageIndex">
<img
:src=""
#load="onImageLoaded.bind(this, someDataVar)"
/>
</div>
So if in the meantime (until the image gets loaded) someDataVar will gonna be changed, I still want to output in onImageLoaded the original value of someDataVar at the time the image was added to DOM by the for-loop.
PS: I've tried with IIFE but it didn't worked
define a 'directive'.
try this.
new Vue({
el: '#app',
data () {
return {
pages: [1,2,3],
someDataVar: 'someData'
}
},
mounted () {
setTimeout(() => {
this.someDataVar = 'otherData'
}, 1000)
},
directives: {
'init-val': {
inserted: (el, binding) => {
el.dataset.initVal = binding.value
}
}
},
methods: {
onImageLoaded (event) {
console.log(event.target.dataset)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(page, pageIndex) in pages" :key="pageIndex">
<div
v-init-val="someDataVar"
#click="onImageLoaded"
>click me!</div>
</div>
</div>
I have a div containing icons that I am hiding with a boolean value and v-show directive:
<div class="room" v-show=show.room #click='toggle = !toggle'>
<div class="col-lg-6 draw-icon-container" v-show="toggle">
<p>Show</p>
</div>
</div>
data: () => ({
toggle: true,
}),
The desired div gets hid by clicking on it, but since it is removed I have no way to display it back, how can I render it again after the user has pressed the enter key? Something like this:
if (e.keyCode == 13) {
this.toggle = false
}
var app = new Vue({
el: '#app',
data: {
show: {room: true},
toggle: true
},
created: function () {
// listen for key event
window.addEventListener('keyup', this.toggleMethod)
},
methods: {
toggleMethod() {
this.toggle = true;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="room" v-show=show.room #click='toggle = !toggle' style="background:red;width:100%;height:40px;">
<div class="col-lg-6 draw-icon-container" v-show="toggle">
<p>Show (Click me to toggle show/hide)</p>
</div>
</div>
To access the scoped variable of the vue component that defined in data(), you must use this keyword, hence to change the value of toggle, you must use this.toggle = false
I has a simple code to test comunicate between child and parent component follow example from vuejs doc : http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events. but apparently it does not work at the parent component
My jsfiddle: Jsfiddle
html:
Vue.component('tasks-item', {
template: '<div>{{item.title}} <button v-on:click="deleteItem(item)">x</button></div>',
props: ['item'],
methods: {
deleteItem: function(item){
console.log('child click')
document.getElementById('output').innerHTML='child click : '+item.title
this.$emit('deleteItem')
}
}
})
Vue.component('tasks-list', {
template: '#tasks-list',
props: ['tasks'],
methods: {
deleteTask: function(){
document.getElementById('output').innerHTML='parent click'
}
}
})
new Vue({
el: '#app',
data: function(){
return {
data:[{"id":51,"title":"rr4434","content":"rtrtrrtrtr"},{"id":50,"title":"rrrr","content":"rrr"},{"id":49,"title":"rrrr","content":"rrr"},{"id":48,"title":"rrr","content":"rrr"},{"id":47,"title":"rrr","content":"rrr"},
{"id":46,"title":"c\u00f4 d\u00e2\u0300n","content":"pha\u0309i khong em"},
{"id":45,"title":"we are you","content":"content"},
{"id":44,"title":"cai min nek","content":"co gi kh\u00f4ng"},{"id":43,"title":"abc","content":"dghjj"},{"id":42,"title":"dddd","content":"ddd"},{"id":38,"title":"444","content":"4444"},{"id":36,"title":"rrr","content":"rr"},{"id":35,"title":"rr","content":"rr"},{"id":34,"title":"rrrr","content":"rrr"},{"id":33,"title":"rrr","content":"rr"}]
}
},
methods: {
}
})
<script src="https://unpkg.com/vue#next/dist/vue.js"></script>
<div id="app">
<div id="output">click output</div>
<hr/>
<tasks-list :tasks="data"></tasks-list>
</div>
<template id="tasks-list">
<div>
<div v-for="item in tasks">
<tasks-item :item="item" v-on:deleteItem="deleteTask()"></tasks-item>
</div>
</div>
</template>
Change
this.$emit('deleteItem')
to
this.$emit('delete-item')
and inside template fix component's v-on from
v-on:deleteItem
to
v-on:delete-item
You can read more at https://v2.vuejs.org/v2/guide/components-custom-events.html