okay I have this problem. I'm trying to make a generic Vue component which should look at the route, and determine id the route has any siblings, and if it has, the component will make tabs for each sibling including current route.
is there any way to achieve this?
Related
I need to have a component, where I get the type of another component that this component should create. (it could be one of n different elements) Doing this in the component's render function is not a problem, but since I am new to Vue and I am trying to do things the Vue way, not the way I would do it in React.
I have not been able to find any solution with just using a Vue template. Is there one?
This is how I would like to be able to use the component:
<factory elm="first-component"></factory>
The factory should then internally in some way result in this:
<first-component></first-component>
(it should also be able to add attributes to the component, but that I know how to do, so a suggested solution does not need to care about attributes)
There is <component :is="myCoolComponent"></component> that will basically generate <my-cool-component></my-cool-component>.
Is it what you're looking for?
From the documentation: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
You could also totally create a Factory.vue component and put that kind of logic inside of it (<component :is="" ...>).
I'm new to vue, and what i would really want to do is to have the possibility to insert a component into another component, without knowing the name of the component.
What i can do, at the moment, is to create a component "componentA" in which i make use of another component "componentB".
However, my goal would be to have componentA declare that it wants to use some component, when it doesn't yet know the component's name. Then, obtain the component's reference through props (or wherever) and use it.
In the same way that, through props, a component can obtain information without knowing what it's gonna be, i would like to know if the component can receive another component and make use of it, without knowing what the component is gonna be.
Is there a way to achieve this in vue.js?
Edit: It can be done by using Dynamic Components. Thank for providing the answer in the comments.
I need recommendation about "the right way" of vuejs layout structure.
I have header, which is the same for whole app but it (header) has one block that changes, depended on which child app I have. Currently it's a parent App.
What is the best solution for that?
multiple parent App
use header as a component with a slot
any better way ?
Accordingly vuejs recommendations, a child component should never change it's parent, instead you can use events or vuex, and then your header will behave accordingly.
https://v2.vuejs.org/v2/style-guide/#Implicit-parent-child-communication-use-with-caution
I am using vue.js and vue-router. I am trying to achieve the following:
I have a top navigation bar with navigation links. Some of them are links to other client-side routes so they are basic vue-router router-link component except one which needs to point to a component with the same id attribute value on the same page.
First, I have coded it as an HTML Anchor Element, a, with an href attribute value equals to the id attribute value of the target component.
Alternatively, I have tried to use a router-link with to attribute has the /, home path concatenated with href (id) value, so, /#target_id.
First way resulted unsuccessful on the routes other than the target element resides in, a bit obvious.
Second way also unsuccessful. It does not work even on the route that contains the target element, though updates the address bar properly. It also cannot reach to the target element from the other routes that do not contain the target element by ending only on the route with target element at the top of the page.
How to tell vue-router to not only reach the route and render the corresponding component but also follow the hash parts and reaching to the correct region on the page?
Probably I can render navigation links conditionally as anchors or router-link with respect to the current route, and then can invoke a window.location related change on a vue component lifecycle method on the target containing component. Or just use some vue component level or applicaiton level routing hooks.
I'm not finding it very obvious how to make a route with this structure:
http://localhost:9000/#/vendors/557794d4dda4a5b6162aab53/services/413jdjo53j2ojo532
In the latest blog, I am seeing references to child/parent routes and looking up parent params from the child, but in the docs, I only see references to child routers and having a whole new router seems a bit like an overkill for this use case.
What is the best way to create such a route and be able to look up data from the parent route? How do we achieve a route hierarchy (like in Ember for example)?
I've found that the easiest way to share data between child and parent route is use a shared state, just create a class
export class State {
status = null
}
And then inject it into both the parent and child view models, by default it will be a singleton so you can use it to pass data around.