My code is like below
props: ['applicants',],
methods : {
formated (item) {
console.log('first')
console.log(Object.keys(this.applicants).length)
},
fetchapplicants () {
console.log('second')
console.log(Object.keys(this.applicants).length)
}
},
created () {
EventBus.$on('change',this.formated);
},
beforeMount(){
this.fetchapplicants();
},
I am getting output like below
Why I am getting different output ?
Related
I have resize event in my mounted() works well.
data() {
return {
...
eventHandler: null,
};
},
mounted() {
this.eventHandler = window.addEventListener("resize", () => {
console.log("resize");
});
},
but when I tried to remove the resize listener on unmount()
beforeUnmount() {
console.log("unmonunted");
window.removeEventListener("resize", this.eventHandler);
},
the resize event is still firing
Anyone know how to solve this?
window.addEventListener returns undefined, not the event handler function.
You should change your code like this:
data() {
return {};
},
mounted() {
window.addEventListener("resize", this.eventHandler);
},
beforeUnmount() {
window.removeEventListener("resize", this.eventHandler);
},
methods: {
eventHandler() {
console.log("resize");
}
}
I'm trying to use an action to call method with boolean value using the store
In the store app.js, i've defined :
export default {
namespaced: true,
state: () => {
return {
isScrollDisabled: true,
}
},
mutations: {
setScrollDisabled(state, value) {
state.isScrollDisabled = value
},
actions: {
setScrollDisabled(context, value) {
console.log('Action called in store')
context.commit('setScrollDisabled', value)
},
getters: {
getScrollDisabled: state => state.isScrollDisabled,
}
,
In the component, i dispatch the action like this :
this.$store.dispatch('app/setScrollDisabled', false) // with true or false
And in other component, i use the store getter to retrieve the value :
computed: {
isDisabled() {
return this.$store.getters.getScrollDisabled
},
I see nothing in the console and also in the VueJs Chrome extension, there are no event displayed
What i forgot here ?
More friendly and easy
computed: {
...mapGetters('app', [
'getScrollDisabled'
])
},
methods: {
...mapActions('app', [
'setScrollDisabled'
])
}
I have a .js file with the following:
Vue.mixin({
data() {
return {
searchFilterSetupBase: {
BasisMasterIdEx: {
Title: this._rsc('Basis', 'Basis'),
Component: 'CheckboxListSelect',
SingleSelect: true,
Source: this.$store.state.storage.lists.BasisMasters//,
}
}
}
},
This works returning the data from the store.
However, I want to filter this data but can't get it to work.
I have tried replacing Source: this.$store.getters.getBasisMasterById() and using a getter as below:
getters: {
getBasisMasterById: state => {
if (this.$store.state.storage.lists.BasisMasters) {
return this.$store.state.storage.lists.BasisMasters.filter((basisMaster) => {
return basisMaster.t === ('STAT')
})
}
}
},
I tried to do something like https://vuex.vuejs.org/guide/getters.html#property-style-access
but just dont know how to implement it. Please help
Editing my post.
I tried the following with getters:
Source: this.$store.getters['movies']
getters: {
movies: state => this.$store.state.storage.lists.BasisMasters
},
computed: {
movies() {
alert('aaaa');
return state.getters['movies']
},
I'm making an app that has advanced search api.
You can choose what to look for and how to sort the results. The problem is that the page (vue-router) is updated only when the request changes, but it also should be updated when you change the search terms
How i can do this? I don't even have any ideas.
There is my code that is responsible for requesting the API and updating the router when the request is updated
export default {
name: "Search",
data: function () {
return {
selectedTag: 'story',
selectedBy: '',
};
},
components: {
'Item': Item
},
mounted() {
this.items = this.getItems(this.id)
},
beforeRouteUpdate(to, from, next) {
this.items = this.getItems(to.params.id);
next();
},
methods: {
getItems(id) {
this.items = this.$store.dispatch('FETCH_SEARCH_RESULTS', {id, tag: this.selectedTag, by: this.selectedBy});
return this.items;
},
},
created: function () {
this.getItems(this.$route.params.id);
},
computed: {
items: {
get() {
return this.$store.state.searchResults;
},
set(value) {
this.$store.commit("APPEND_SEARCH_RESULTS", value);
}
}
}
}
I use axios to fetch my JSON file en vuex for using the fetched data over multiple components.
The thing is that my page renders before all data is loaded.
The following works because I delayed the rendering by 2 seconds, without this timeout it would result in an error.
I would like to do this the proper way but am not sure how to do it.
STORE.JS
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
poss: null
},
getters: {
NAME: state => {
return state.name
},
POSS: state => {
return state.poss
}
},
mutations: {
SET_POSS : (state,payload) => {
state.poss = payload
},
ADD_POSS : (state,payload) => {
state.poss.push(payload)
},
},
actions:{
GET_POSS : async (context,payload) => {
let { data } = await axios.get("json/poss.json")
context.commit('SET_POSS',data)
},
SAVE_POSS : async (context,payload) => {
let { data } = await axios.post("json/poss.json")
context.commit('ADD_POSS',payload)
}
}
});
COMPONENT.VUE
module.exports = {
mounted:function(){
var self = this;
setTimeout(function () {
self.mkPageload()
}, 2000);
},
methods: {
mkPageload: function(){
let positions = this.$store.getters.POSS.pos
Object.keys(positions).forEach(key => {
// rendering
}
}
}
}
The desired result is that the page is only rendered after all data from the JSON file has been loaded.
There are several ways to solve this.
You could use wait / async in your component.
async mounted () {
await userStore.getAll()
// access getter and render
},
Your could watch vuex variable like (could be done without async but I like to add them)
async mounted () {
await userStore.getAll()
},
computed: {
...mapGetters('users')
},
watch: {
users(newValue, oldValue) {
....
// render
}
}
dont'forget to import the mapGetters: https://vuex.vuejs.org/guide/getters.html