Develop Reference

How to remove external JS when navigate to another page VUEJS

I have java script component in home component with external js. I need to remove external js when page navigate to another page. Page does not refresh.
<script>
function initFreshChat() {
window.fcWidget.init({
token: "***",
host: "https://wchat.freshchat.com"
});
}
function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
</script>
This is the external js: https://wchat.freshchat.com/js/widget.js
I need this because i need to keep this freshchat window in one page.
This can be done by putting any condition. But it will works if we refresh the page. Here pages are not refreshing at all.
Therefore I need to remove the external js when navigate to another pages. And mount back when came to this page.

You can wrap the script in side a Vue component life circle,
render
remove
refresh
whenever you need.
I found this code on codepen https://codepen.io/akccakcctw/pen/LBKQZE
Vue.component("fc-button", {
template: "#fcButton",
props: {
fc: {
type: Object,
default: {},
}
},
methods: {
openWidget: function() {
document.getElementById("fc_frame").style.visibility = "visible";
window.fcWidget.open();
}
}
});
const vm = new Vue({
el: "#app",
data: function() {
return {
fc: {
isInit: false,
},
};
},
mounted: function() {
var self = this;
window.fcSettings = {
token: "8d3a4a04-5562-4f59-8f66-f84a269897a1",
host: "https://wchat.freshchat.com",
config: {
cssNames: {
widget: "custom_fc_frame",
open: "custom_fc_open",
expanded: "custom_fc_expanded"
},
headerProperty: {
hideChatButton: true
}
},
onInit: function() {
window.fcWidget.on("widget:loaded", function() {
self.fc.isInit = true;
window.fcWidget.on("unreadCount:notify", function(resp) {
console.log(resp);
test = resp;
if (resp.count > 0) {
// document.getElementById('notify').classList.add('h-btn-notify');
document.getElementById("notify").style.visibility = "visible";
} else if (resp.count == 0) {
// document.getElementById('notify').classList.remove('h-btn-notify');
document.getElementById("notify").style.visibility = "hidden";
}
});
window.fcWidget.on("widget:closed", function() {
document.getElementById("fc_frame").style.visibility = "hidden";
document.getElementById("open_fc_widget").style.visibility =
"visible";
});
window.fcWidget.on("widget:opened", function(resp) {
document.getElementById("open_fc_widget").style.visibility =
"hidden";
});
});
}
};
}
});

Next page does not open. Problem with pagination

I need to make a pagination in my task, but it is not working.
I made two buttons to which I attached the "click" event and I registered a property in the "data". When I click on the buttons, the property changes and is written to the link and in the same way changes the current 10 posts to the following.
But for some reason it does not work as it should work. Can someone please explain what my mistake is and if you can suggest some articles on the subject of "pagination".
This is my html:
<button type="button" #click="counter -=1" class="prev">Prev</button>
<div class="counter">{{ counter }}</div>
<button type="button" #click="counter +=1" class="next">Next</button>
This is my Vue:
export default {
name: 'app',
data () {
return {
counter: 1,
zero: 0,
posts: [],
createTitle: '',
createBody: '',
visiblePostID: ''
};
},
created () {
axios.get('http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10').then(response => {
this.posts = response.data;
});
}
};

The created method is called only when the component is created. To make the GET request everytime the counter increase or decrease use watches link.
Your example will become:
export default {
name: 'app',
data () {
return {
counter: 1,
zero: 0,
posts: [],
createTitle: '',
createBody: '',
visiblePostID: '',
}
},
watch: {
counter: function(newValue, oldValue) {
this.getData()
}
}
created(){
this.getData()
},
methods: {
getData() {
axios.get(`http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10`).then(response => {
this.posts = response.data
})
}
}
}

You need to create a watcher for your counter that fires a load method. This way every time your counter changes you'll load in the correct posts for the page in your paginated results.
export default {
name: 'app',
data () {
return{
counter: 1,
...
}
},
created(){
this.loadPosts()
},
watch: {
counter(newVal, oldVal){
this.loadPosts()
}
},
methods: {
loadPosts(){
axios.get('http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10')
.then(response => {
this.posts = response.data
})
}
}
}

Maybe this can help you. https://scotch.io/courses/getting-started-with-vue/vue-events-build-a-counter
I don't know vue, but looks like you need a function to load new data

Vuetify scroll after create element

I'm trying to do autoscroll by using vuetify inside bus event but this doesnt't work. I tried to reproduce my problem on codepen with just a click event (named clicked) I have the same behavior : https://codepen.io/anon/pen/MLgRBz?&editable=true&editors=101
So I took the scroll example from the doc. I use a function to trigger the click event and inside I set the show variable to true then I use goTo function to scroll.
The problem is, I have to click twice on the button to scroll because the DOM isn't created. how can I do ? There is another event to know when v-if directive create the element ?
const easings = {
linear: '',
easeInQuad: '',
easeOutQuad: '',
easeInOutQuad: '',
easeInCubic: '',
easeOutCubic: '',
easeInOutCubic: '',
easeInQuart: '',
easeOutQuart: '',
easeInOutQuart: '',
easeInQuint: '',
easeOutQuint: '',
easeInOutQuint: ''
}
new Vue({
el: '#app',
data () {
return {
type: 'number',
number: 9999,
selector: '#first',
selected: 'Button',
elements: ['Button', 'Radio group'],
duration: 300,
offset: 0,
easing: 'easeInOutCubic',
easings: Object.keys(easings),
show: false
}
},
methods: {
clicked: function() {
this.show = true;
this.$vuetify.goTo(this.target, this.options);
}
},
computed: {
target () {
const value = this[this.type]
if (!isNaN(value)) return Number(value)
else return value
},
options () {
return {
duration: this.duration,
offset: this.offset,
easing: this.easing
}
},
element () {
if (this.selected === 'Button') return this.$refs.button
else if (this.selected === 'Radio group') return this.$refs.radio
}
}
})
I tried to do it with setTimeout between this.show = true and this.$vuetify.goTo it works but it's ugly

You can use $nextTick to scroll after showing content:
clicked: function() {
this.show = true;
this.$nextTick(() => {
this.$vuetify.goTo(this.target, this.options);
});
}
Codepen demo

Below is My Implementation. Works great for me...
gotToSection(elementId = null) {
if (elementId) {
this.$nextTick().then(() => {
let scrollToElement = document.getElementById(elementId);
// console.log(elementId, scrollToElement);
if (scrollToElement) {
this.$vuetify.goTo(scrollToElement, {
duration: 200,
offset: 0,
easing: "easeInOutCubic",
container: "#target-scroll-container"
});
}
});
}
}

Why can't I see my neon-animeted tags, moving/fading-out/etc.?

The code is working properly, but somehow it does not show any animations.
I mean using fade-out-animation, it only disappears, no matter what is the duration.
I've imported all the stuff I needed (fade-out-animation,polymer,webcomponents,neon-animation-runner-behavior)
Polymer({
is: 'test-animation',
behaviors: [Polymer.NeonAnimationRunnerBehavior,Polymer.NeonAnimationBehavior],
properties: {
opened: {
type: Boolean
},
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-from-right-animation',
node: this,
timing: {delay: 2000, duration: 6000}
},
'exit': {
name: 'fade-out-animation',
node: this,
}
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
show: function() {
this.opened = true;
//this.cancelAnimation();
this.playAnimation('entry');
},
hide: function() {
this.opened = false;
// this.cancelAnimation();
this.playAnimation('exit');
},
_onNeonAnimationFinish: function() {
if (!this.opened) {
this.style.display = 'none';
}
}
});

I think you made a mistake in the imported behaviors.
You are using :
-Polymer.NeonAnimationRunnerBehavior, which is correct since your component is running an animation.
-Polymer.NeonAnimationBehavior, which is incorrect: this behavior is meant for creating an animation (fade, slide, whatever you wish). You, on the other hand, want your component to be animatable (meaning, having a Polymer.NeonAnimationBehavior applied to it). The correct behavior for that is Polymer.NeonAnimatableBehavior
So you should change:
behaviors: [Polymer.NeonAnimationRunnerBehavior,Polymer.NeonAnimationBehavior]
to :
behaviors: [Polymer.NeonAnimationRunnerBehavior,Polymer.NeonAnimatableBehavior]
Edit :
I can confirm this was indeed the problem, as I tested this solution successfully.
However, you also have some coma and semi-colon problems in the declaration of your animation. It should be as follows :
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-from-right-animation',
node: this,
timing: {
delay: 2000, duration: 6000
}
},
'exit': {
name: 'fade-out-animation',
node: this
}
};
}
}

To apply .delay() on mouseenter in my plugin

I got a div, that on mouseenter, is suppose to show another div. I'm not sure how to achive this in a plugin. This is my code and what I have tried so far.
Code: JsFiddle
<div class="hover-me"></div>
<div class="show-me"></div>
var Nav = {
hover_me: $('.hover-me'),
show_me: $('.show-me'),
init: function() {
Nav.toggle_display();
console.log('init');
},
toggle_display: function() {
Nav.hover_me.mouseenter(function() {
Nav.show();
});
Nav.hover_me.mouseleave(function () {
Nav.hide();
});
},
show: function() {
Nav.show_me.fadeIn();
},
hide: function() {
Nav.show_me.fadeOut();
}
};
I tried to do this, without any luck.
Nav.hover_me.mouseenter(function() {
Nav.delay(1000).show();
});

see Jimbo's comment:
var Nav = {
// [...]
timeoutId: undefined,
// [...]
};
Nav.hover_me.mouseenter(function() {
Nav.timeoutId = setTimeout(function() {
Nav.show();
}, 1000);
});
Nav.hover_me.mouseleave(function () {
if (Nav.timeoutId) { clearTimeout(Nav.timeoutId); }
Nav.hide();
});
SEE THE FIDDLE