I am able to add component from array variables to main component using following way:
<component :is="currentTabComponent"></component>
Now I want to add another dynamic component inside rendered component.
If u say using slot then how can i access specific component's slot and push my variable component to that slot.
https://jsfiddle.net/capt8ndq/42/
I have created example fiddle have mainContainer->slider->sliderContent(this may have further nesting) structure.
I am getting following error after some progress
Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
Thanks for the help!
Instead of using slot, make use of props by passing props down to that rendered component and also modify that rendered component to also has <component :is="componentFromProps"></component>.
Related
So have a a MainLauyout.vue file
In that file I have a Toolbar component and a content component like so
<!--MainLayout.Vue-->
<Toolbar />
<Content></Content>
Within Content component I have a search bar with #input
Within the Content component
I have a router-view that displays another vue.
Within that vue, I have a table with a search function defined.
I was wondering how its possible to put that function in the #input that is in the Toolbar component. From what I was able to search they say to use refs but I'm not sure how to get that to work with my layout structure. Can anyone let me know the best way to do this?
I have this component which has a v-model directive:
<my-component v-model="someData.someProp"></my-component>
Now, I'd like to be able to watch this piece of data inside the component and make changes based on this model changing via outside influences. So here's what I tried and it's not working:
watch : {
value (newVal, oldVal) {
// ...
}
}
It seems like it should work, or something comparable should be out there, but I just can't find it right now.
EDIT:
The most common answers I found and provided center on using the watcher to watch the data as if it's inside the parent component - but I'd like to watch it inside the child component without concern of what's going on in the parent.
I'm able to work around this by not using v-model and using simple named properties such as :my-data="someData.someProp" at which point I can successfully watch a myData variable inside the child component. I can also use #input to set the data back in the parent component if it's changed from within. But v-model is shorter and if there's a way to use that instead of a workaround that would be preferable.
From what I understand you are trying to pass a prop to your child component from your parent one and watch it in your child.
Assuming you have something like this in your parent:
<div>
<my-component v-model="someData.someProp"></my-component>
</div>
I understand you are getting undefined for that prop when you watch it, which is normal because you should pass it like this:
<my-component :myValue="someData.someProp"></my-component>
Then you should have access to the prop trought this.myValue.
If someData.someProp changes on the parent component it will automatically reflect on the child one.
Again this is what I could understand from your explanation and the amount of code you provided.
I am currently struggling with referencing existing DOM elements with VueJS.
I have an existing date input rendered from the applications twig template and a separate VueJS widget i integrated.
<input type="time" ref="date_time_1" min="09:00" max="18:00" value="13:30">
The date input field is NOT inside the components template, but within the VueJS application (having id="#app").
For data-binding i would like to use the ref attribute to connect the VueJS component with my date input field inside the components template (e.g. for initialization with values coming from the application):
mounted() {
componentsTimeValue: this.$refs["date_time_1"].value;
}
getting undefined here.
Is there a way to connect "existing" DOM elements (that are not created with vue), with vue components using the ref attribute at all?
Though not a good practise because #div container is handed over to vue for manipulation but still you can reference the dom that weren't created by vue but lie inside #app
For that you must reference properly, so if you are in some child component you use
mounted() {
componentsTimeValue: this.$root.$refs["date_time_1"].value;
}
I'm using Vue.js with Vue-router in a project and I'm trying to have a callback whenever the routed-to component is ready. Usually you would do it inside each component in the mounted() hook, but for this case I want it for every component that has been routed to.
I tried with router.OnReady() and router.afterEach() but it did not work since they happen after routing but before the component is mounted. I also tried changing the vue-router source code adding mounted() to the router-view component, but it's not getting called.
There is no on-router event for this but according to this issue you can get around this by using Vue.nextTick inside router.afterEach.
I know in vue, I can use this.$parent to get the upper component in the vdom tree. But I'm expecting something different: to get the component that rendered the current component.
For instance, I have a component (named comp-container) with template:
<template>
<comp-a>
<comp-b></comp-b>
</comp-a>
</template>
And in comp-b the $parent would be an instance of comp-a not comp-container which I'm expecting.
My current aproach is traversing up with the $parent attribute until I find comp-b exists in $options.components. This method is working for now but seems quite ugly and breaks if comp-b is a globaly registered component. Is there an official way to do this?
Passing the parent template component via props as <comp-b :container="this"></comp-b> may do the job, but it's too verbose to be liked.
I'm not sure about the exact use case, but basically if there are slots involved (which I almost assume, because otherwise $parent will work fine), you can find the rendering component at:
this.$slots.default[0].context;
Basically, the context property of a slot is the rendering context (rendering component - i.e. the component who's template the component was rendered in).
Only tested with Vue 2