This is easy to accomplish. You can register components globally in the main.js file. import MyComponent from ‘@/components/MyComponent’ Vue.component(‘my-component-name’, MyComponent) Now you can use <my-component-name /> everywhere. A cleaner way, without bloating your main.js, is to import your component in an index.js file in your components folder like this. import Vue from ‘vue’ import MyComponent … Read more
Thanks to Sandeep Rajoria we found solution, need to use this.$route except $route inside a component
I have a file with function like a func.js like below export const func = { functionName: (data) => { return something } } In main.js add 2 string import {func} from ‘./func.js’ Vue.prototype.$func = func and you can use from all components if in script tag like below this.$func.functionName(somedata) or if template tag like … Read more
Just use v-if on a common parent to all the elements in your template relying on that AJAX call, not around each one. So instead of something like: <div> <h1 v-if=”foo.title”>{{ foo.title }}</h1> <p v-if=”foo.description”>{{ foo.description }}</p> </div> Do <div> <template v-if=”foo”> <h1>{{ foo.title }}</h1> <p>{{ foo.description }}</p> </template> </div>
The trick is to alter the key When the key changes, vue regards it as a new component, so it will unmount the “old” component, and mount a “new” component. See example, the created() hook will only run once, so if you see the value change, you’re seeing a brand new object. example: Vue.component(‘my-component’, { … Read more
No. <template> <div></div> <div>~someone~</div> </template> Yes. <template> <div> <div></div> ~someone~ </div> </template> If you do not use a “div” tag just inside the “Template” tag, you will get the same error. (By the way, it was possible to use other than div tags)
Unfortunately, it is impossible to use computed property in data because of component creation timing: data evaluates Before computed properties.
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
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