hello. I have one question, my app is watching for the this.$vuetify.breakpoint.width property and updating a value that is used in a submenu.
Computed:
computed: {
width() {
return this.$vuetify.breakpoint.width
},
},
Watch:
watch: {
width() {
this.setSubMenuWidth()
},
},
setSubMenuWidth() {
this.subMenuWidth = this.$vuetify.breakpoint.width
this.$refs.submenu.style.width = this.subMenuWidth + 'px'
}
Resizing works but after reloading the changes are lost.
It seems to be all ok.
All you have to do is use mounted to run the method after the page is loaded or reloaded.
mounted() {
this.setSubMenuWidth()
},
Edit:
I recommend you to check this: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
Vue has a life cycle, check it out.
Related
I inherited app written in VUE and mostly I found my way through the app to make designed changes, but I have problem with the below code.
What I want to achieve is: on scrolling the new tiles are being loaded and they have elements which should be replaced as in vueComponent function.
It works as designed on document load, but new elements are not being replaced. I haven't copied all the code, but you can get an idea. Please see my comments below to know what is working and what is not.
$(document, context).once('vue__comparison_toggle_add').each(() => {
Drupal.behaviors.vue__comparison_toggle.vueComponent(); //this works perfectly
});
$(window).on("scroll", function() {
Drupal.behaviors.vue__comparison_toggle.vueComponent(); //this doesn't although the function is entered
});
},
vueComponent: function () {
Vue.component('comparison-training-toggle', {
template: this.template,
props: ['trainingId', 'icon', 'init-comparison'],
data() {
return {
inComparison: false,
}
},
computed: {
toggleText() {
return this.inComparison ? Drupal.t('Usuń z porównania') : Drupal.t('Dodaj do porównania')
}
},
methods: {
toggle() {
...
I have a Vuex store where I have a getter which works correctly and I can see the changes on the state. But if I call this getter as computed property in component it does not work. The value is still the same.
The store code looks like:
mutations: {
UPDATE_SERVER_FILTERS(state, payload) {
this._vm.$set(state, 'serverFilters', payload);
//state.serverFilters = payload; // Both patterns work
},
getters: {
serverFilters(state) {
return state.serverFilters; // This works fine
}
}
}
The component code:
computed: {
serverFilters() {
return this.$store.getters[this.storeName + '/serverFilters'];
},
}
Here is JSFiddle example https://jsfiddle.net/camo/je0gw9t3/4/ which works fine. And it is a problem cause in my project it does not work. I am prepared to die...
How can I solve it?
In the most bottom part:
new Vue({
store,
el: '#example',
data() {
return {};
},
computed: {},
methods: {
changeFilters() {
this.$store.dispatch(this.storeName + '/updateFilters');
// ^^^^^^^^^^^^^^ there is no storeName
},
},
});
The changeFilters method. You are using this.storeName, but there is no this.storeName! Just like the Child component, add storeName: 'a' to the data() then it should work.
https://jsfiddle.net/4yfv3w87/
Here is the debug process for your reference:
First open the Vue Devtools and switch to the timeline tab. And just click the button, you will see that there is no action is being fired. So the problem must be the one who dispatches the action. And then you will notice that the root component doesn't have a storeName.
So don't panic, just try to trace the code. It will only take a few minutes to find out the issue!
Computed properties might have problem to make an observer reference from returned value out of function. Instead of chaining getters and computed properties, why you don't use just getters or computed properties ? In my opinion, it's a bad practice to use them both, and I can't imagine a situation you need it. So if you need filter operations in many components, just make a getter and use getter in components instead of computed properties.
If you really want to chain them, try this:
new Vue({
store,
el: '#example',
data() {
return {
storeName: 'a'
}
},
computed: {
filters() {
get() {
return this.$store.getters[`${this.storeName}/getFilters`];
}
set(newValue) {
this.$store.dispatch(this.storeName + '/updateFilters');
}
},
},
})
Comment please if someone check it. I don't know are it works.
I have to continue to develop from others. But a value is passed vuex.
mounted() {
this.fetch();
},
computed: {
...mapGetters(['getValue'])
},
methods: {
...mapActions(['fetch']),
...mapMutations({}),
async scrollBottom() {
this.fetch();
}
}
getValue is data .
fetch is a action > edit delete
if refresh page is true work properly But I would like it to be real time.
Can I have some advice?
And it would help me a lot if you have the right example.
I would like to detect when page is refreshed or reloaded in vue.js. I have read the question from this post Do something before reload or close in vue.js. It's using window.onbeforeunload. But the problem for me, where do I put this window function ? Could we use another default method from vuejs for detecting the page that is refreshed ?
Thank you
You can use the created function to call another function. Example:
created() {
window.addEventListener('beforeunload', this.handler)
},
methods: {
handler: function handler(event) {
// Do Something
}
}
or
created() {
window.addEventListener('beforeunload', function(event) {
event.returnValue = 'Write something'
})
},
Check it : https://forum.vuejs.org/t/detect-browser-close/5001/8
I am trying to watch a particular property of a component. The property is an array which gets's updated every time a checkbox is selected.
https://github.com/ratiw/vuetable-2/wiki/Special-Fields#-__checkbox
This is the code that I am trying with is like this
watch: {
selectedTo: function(val){
console.log(val);
}
},
Neither did the below code work
watch : {
selectedTo: {
handler(val, oldVal)
{
console.log('Item Changed');
},
deep: true
}
},
Vue console: http://prntscr.com/gb1gew
You can watch $refs.<name>.<data> but not $refs.<name> itself.
Reference on this: https://jsfiddle.net/kenberkeley/9pn1uqam/
Still, though I don't know much about how your code works, try
this.$watch(() => this.$refs.vuetable.selectedTo, (val) => {...})