VUE component mutual interference - javascript

I have a vue component named "MText",
I insert the component twice,like this:
<MText></MText>
<MText></MText>
"MText" bind a click event to remove itself through "this.$el.remove();",but I click the second one,it is strange that the first one is removed;why?thanks everyone who can help me~~thx very much!

Related

How to open a modal component through an onClick from another component

This question is related to this one. I am rewording to make it simple.
I have a main navigation component (MainNavigation.js) which is siblings with a Secondary Navigation Component(SecNavigation.js) under the Header component(Header.js).
What I want is when I click on a specific Link in the MainNavigation.js the whole SecNavigation.js to be displayed in a modal.
My problem here is that I don't quite grasp how should I go using useState, useContext or even if I need any of this.
Hope this will clear something for you
What you need is a parent that handles the state and then it will pass it down to its children. Because the parent is keeping track of the children and what they are doing.
So what I have done it this:
App.js is the parent and I handle the state here.
Then I just pass down the setIsModalShowing setState function to the MainNav that will call it when I press a button.
Then in the App.js I will show or hide the modal if the setIsModalShowing is true or false
inside of the modal I am showing SecNav and the modal also has the setIsModalShowing passed down so that you can click on the button to close is and that will set the state to false.
Does that makes sense to you ? or else I can try to explain it in another way
Code example

click event in parent of component not working in angular

I have nested component like this pattern
<div (click)="saveInfo()">
<product-list-component>
<single-product>
<div (click)="navigateToDetailsProduct()"></div>
<single-product>
<product-list-component>
</div>
and I want when I click on single product both of click function (saveInfo() in parent and navigateToDetailsProduct() in child component) are executed.
but sometimes both of them are executed and some times just a click function in child component.
I glad to understand how can I trigger two function in parent and child component in angular.
You can trigger two functions in parent and child component angular at same time. when you will click on navigateToDetailsProduct() then this function along with saveInfo() will trigger. Please open below link and see.
Click on "Navigate To Details Product" you can see two alert will come 1st when navigateToDetailsProduct() will trigger and second when saveInfo() will trigger.
https://stackblitz.com/edit/angular-ivy-uvyacb?file=src/app/singleproduct.app.component.html
Let me know if you need anything more.

Getting data between components in Vue JS

I really can't get binding data between components.
Steps,
get text value from Child1 component
execute Add method on App.vue
send test value from App.vue and make a v-for list on Child2
No.3 is not working.
I dont' even know 1,2 are correct on code..
How can I get input data to show item list?
Here's my code: Link
Code fixed: https://codesandbox.io/s/parent-to-childbyclicking-pp4yy
You emit a input event on Child1, but the App.vue was not listening. Also, the list was wrongly pass on Child2 props.
Feel free to comment if you don't understand any part ;)

How to create custom modal in reactjs app?

I want to make custom confirmation modal whenever user wants to delete his own post. How to approach that to use as less as possible code? I was thinking about independent component with logic inside (user can send via props function on yes/no, etc) but the problem I can't figure out is how to mount this component when user click on a button? Do I need to use local state inside every component when I need to use modal? Something like:
showModal ? <Modal onYes={()=>{}} onNo={()=>{}} title='whatever you want' /> : ''
Can I achieve that in other way? I hope I explained well.
You can use HOC as well. Keep show/hide state inside HOC and then pass props/functions (with currying) from Parent component
Small example - https://codesandbox.io/s/withtoggle-hoc-8bd0r

Vue.js: Communicate with components that are down the DOM

I'm just trying out Vue.js and I'm struggling with the key concept of passing information up and down the DOM from one component to the other.
Consider this example in which a container-toggle button should toggle all components within the container, or say, set them all to "true" or "false".
<div id="app">
<p>
<strong>Welcome!</strong>
Click the "true/false" buttons to toggle them.
Click the "Toggle all" button to toggle them all!
</p>
<app-toggle-container>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
</app-toggle-container>
<app-toggle-container>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
<app-toggle></app-toggle>
</app-toggle-container>
</div>
In this code pen, I've defined app-toggle and app-toggle-container as components: https://codepen.io/fiedl/pen/mmqLMN?editors=1010
But I can't find a good way to pass the information down from the container to the separate toggles.
Also, in a second step, when trying the other way round, for example, to have the "Toggle all" button just show "true" if all toggles are true, or to show "false" when all toggles are false, I can't find a way to pass the information of the current state of the toggles up to the container.
This doesn't seem like an uncommon problem. What is the proper way to do this in Vue.js? Or am I thinking about this it in the wrong way?
Quickly, I've found $broadcast and $dispatch. But as they are dropped in Vue.js 2, I'm most probably thinking about it in the wrong way :)
I forked your pen http://codepen.io/nicooga/pen/wdPXvJ.
Turns out theres a $children property for Vue components that contains your children components [controllers]. You can iterate over them and do stuff with them.
this.$children.forEach(c => c.toggle());
See
https://v2.vuejs.org/v2/api/#vm-children
VueJs Calling method in Child components.

Categories