Your component’s async setup() looks fine other than the missing await res.json(), which still wouldn’t cause the problem you’re seeing. I suspect your usage of <Suspense> is incorrect. To use async setup() in a component, the parent component must use that component in a <Suspense> tag: <!– Parent.vue –> <template> <Suspense> <MyAsyncComponent /> </Suspense> </template> … Read more
Add the router-link stub to the shallow (or shallowMount) method options like this: const wrapper = shallow(TempComponent, { propsData: { temp }, stubs: [‘router-link’] }) or this way: import { RouterLinkStub } from ‘@vue/test-utils’; const wrapper = shallow(TempComponent, { propsData: { temp }, stubs: { RouterLink: RouterLinkStub } }) The error should go away after … Read more
In the routes declaration, I like to add this: [ … { path: ‘/404’, component: NotFound }, { path: ‘*’, redirect: ‘/404’ }, … ] Which will imply that if the user is navigated to a path which does not match any routes, it will be redirected to the “404” route, which will contain the … Read more
You can try this code above for conditional class in the html template <element v-bind:class = “(condition)?’class_if_is_true’:’else_class'”></element> You may see the official vue documentation on this topic here.
Have a look at the “Disabling Attribute Inheritance” section of the docs and the api description for the full details. It’s main usage is to define so-called “transparent” components that pass-through attributes. The example given in the doc is a component wrapping an input element: // Component Vue.component(‘base-input’, { inheritAttrs: false, props: [‘label’, ‘value’], template: … Read more
Simplest way of providing global objects to the template is to place them in computed, like this: console: () => console. Same goes for window, computed: { console: () => console, window: () => window, } See it here.
Referencing the code in your fiddle Somehow, you should decide on one place for the state to live, not two. I don’t know whether it’s more appropriate to have it just in the Alert or just in it’s parent for your use case, but you should pick one. How to decide where state lives Does … Read more
Normally, the click event handler will receive the event as its first argument, but you can use bind to tell the function what to use for its this and first argument(s): :clicked=”clicked.bind(null, post) Updated answer: However, it might be more straightforward (and it is more Vue-standard) to have the child emit an event and have … Read more
I had the same problem but with exporting a component. Some vs code snippets create templates without necessary types like this below export default { data() { return { x: “something”, }; }, methods: { rename(name: string) { this.x = name; }, }, }; The problem was I did not add defineComponent() to export default. … Read more
Slots are compiled against the parent component scope, therefore events you emit from the slot will only be received by the component the template belongs to. If you want interaction between the carousel and slides, you can use a scoped slot instead which allows you to expose data and methods from the carousel to the … Read more