vue-wait
vue-wait copied to clipboard
Published
20 hours ago •
f
f
WaitFor is broken
I can't use waitfor helper for any situation.
Here is how I install the VueWait instance.
I think i need a waitFor method from wait instance, but it had nothing.
import VueWait from 'vue-wait';
...
new Vue({
....
wait: new VueWait({ useVuex: true })
})
Actually I'm not forget to use,
I think the major reason Is the waitFor api cannot find my instance at Vue.
I just integrated vue-wait with my own app and I'm noticing this as well. It seems as though as this relates to something that's not really the component instance.
Here's my sample. I've got a component with a method function:
export default {
// ...
methods: {
init: waitFor('initializing', async () => {
await this.$store.dispatch('projects/projects/init');
}),
}
}
Inside the async function, logging this shows an object with a single a object within. It does appear to be the component; however, this.a.$store returns undefined:
{
"a": {
"name": "Projects",
"mixins": [
{
"directives": {
"onClickaway": {}
}
},
{
"props": {
"feature": {
"default": null
}
}
}
],
"components": {
"ProjectsNav": {
"name": "ProjectsNav",
"props": {
"currentView": {}
},
"staticRenderFns": [
null
],
"_compiled": true,
"__file": "src/components/projects/Nav.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
],
"_Ctor": {}
},
"ProjectCard": {
"props": [
"project"
],
"mixins": [
{
"computed": {},
"methods": {}
}
],
"components": {
"UserTag": {
"name": "UserTag",
"props": {
"isCreator": {
"default": false
}
},
"components": {
"UserTagImage": {
"name": "UserTagImage",
"props": {
"image": {},
"isCreator": {
"default": false
}
},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/UserTagImage.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
]
}
},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/UserTag.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
]
}
},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/projects/Card.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
]
},
"MembersDialog": {
"name": "MembersDialog",
"mixins": [
{
"computed": {}
}
],
"components": {
"MembersInputTag": {
"name": "MembersInputTag",
"components": {
"VueTagsInput": {
"name": "VueTagsInput",
"components": {
"TagInput": {
"name": "TagInput",
"props": [
"scope"
],
"staticRenderFns": [],
"_compiled": true,
"_scopeId": "data-v-5d05513b",
"beforeCreate": [
null
]
}
},
"props": {
"value": {
"default": "",
"required": true
},
"tags": {},
"autocompleteItems": {},
"allowEditTags": {
"default": false
},
"autocompleteFilterDuplicates": {
"default": true
},
"addOnlyFromAutocomplete": {
"default": false
},
"autocompleteMinLength": {
"default": 1
},
"autocompleteAlwaysOpen": {
"default": false
},
"disabled": {
"default": false
},
"placeholder": {
"default": "Add Tag"
},
"addOnKey": {},
"saveOnKey": {},
"maxTags": {},
"maxlength": {},
"validation": {},
"separators": {},
"avoidAddingDuplicates": {
"default": true
},
"addOnBlur": {
"default": true
},
"isDuplicate": {
"default": null
},
"addFromPaste": {
"default": true
},
"deleteOnBackslash": {
"default": true
}
},
"computed": {},
"methods": {},
"watch": {
"tags": {
"deep": true,
"user": true
},
"autocompleteOpen": "selectDefaultItem"
},
"staticRenderFns": [],
"_compiled": true,
"_scopeId": "data-v-08ed9d46",
"beforeCreate": [
null
],
"_Ctor": {}
},
"UserTagImage": {
"name": "UserTagImage",
"props": {
"image": {},
"isCreator": {
"default": false
}
},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/UserTagImage.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
]
}
},
"props": {
"creatorId": {
"required": true
},
"initUsers": {}
},
"methods": {},
"computed": {},
"watch": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/MembersInputTag.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
],
"_Ctor": {}
}
},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/projects/MembersDialog.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
],
"_Ctor": {}
},
"ArchivedDrawer": {
"name": "ArchivedDrawer",
"components": {
"ProjectCard": {
"props": [
"project"
],
"mixins": [
{
"computed": {},
"methods": {}
}
],
"components": {
"UserTag": {
"name": "UserTag",
"props": {
"isCreator": {
"default": false
}
},
"components": {
"UserTagImage": {
"name": "UserTagImage",
"props": {
"image": {},
"isCreator": {
"default": false
}
},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/UserTagImage.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
]
}
},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/UserTag.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
]
}
},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/projects/Card.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
]
}
},
"props": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/components/projects/ArchivedDrawer.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
]
}
},
"computed": {},
"methods": {},
"staticRenderFns": [],
"_compiled": true,
"__file": "src/views/projects/index.vue",
"beforeCreate": [
null
],
"beforeDestroy": [
null
],
"_Ctor": {}
}
}
Try use
export default {
// ...
methods: {
init: waitFor('initializing', async function() {
await this.$store.dispatch('projects/projects/init');
}),
}
}
