I am kinda new to vue js and I really need some advice from you to do this task.
In my vue-laravel application,
I have multiple pages, and a component.
i need to provide an prop to that component, So I can use it as an Id.
But that componet is already applied in multiple pages. So I have to add that prop to each and every vue pages , that component has added,
Do we have any way to send an id to the componet(as a prop or anything else) without having to declare it in other pages.
Ex:
first.vue
<component id='1' />
secind.vue
component should be able to define without id property as well
<component />
If I understand you correct you want to pass data from your parent.vue to your childs child.vue.
So to answer your question: you have to declare your props in every component below your parent
If you send e.g. your index from parent to child it look like this:
parent.vue
<child :indexParent="index"/>
in your child.vue you have to define your property in your script like this:
props: ["indexParent"]
than you can use this value in here - if you want to have it in your child from your child.vue you have to send it again to it's child like this:
child.vue
<childsChild :indexParent="indexParent"/>
and than you can define it again in your props.
Hopefully this answer helps you out!
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 working on a project that has a component structure like follows
Parent component that contains items
This component has a v-for over this.items.
That v-for has a
ChildComponent contains a form that modifies properties of this.item via v-model for each property.
I was expecting, since VueJS does not support 2 way databinding by default, that ParentComponent would not be aware about changes that I make in ChildComponent.
However, since my ChildComponent is a modal dialog, I can see the changes that I make in ChildComponent are reflected in ParentComponent.
As much as I like what I see, I don't understand it...
Could someone shed a light on this for me?
I was just wondering if this is even possible, lets assume I have this code here:
<div v-for="tile in container" v-bind:class="proper-class">
<tile :tile='tile' #update="update-class"></tile>
</div>
I want to change the css class of the parent div when a variable inside of the component changes.
I know we should use $emit but we have a v-for in here, so we're creating multiple components, the $emit callback will update proper-class BUT this will update the css class of ALL the parents and not just the parent of the component that issued the update event.
What could be a solution to this?
Thanks in advance.
You can use the sync modifier to create a two way binding between the parent and child. It's nothing more than syntactic sugar for the child component emitting an event back to the parent with the desired payload.
this.$emit('update:propName', payload)
Vue sync modifier
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