I found this question that is similar, but it did not explain the issue I am trying to solve for. (Using Vue.js 2)
I have an array of objects (users), that I display as a list.
I want to open an "edit user" modal component, which needs to prefill the form values with the user data (exact parent object), but I do not want to edit the parent data until I click a save button that verifies the data before emitting an input event with the new values of the object.
I do not want to manually call out each property to create a new "clean" object (if I change the data type this is a headache), but Vue is adding its reactivity to the user object and therefore modifying the value in the component updates the parent value at the same time.
I also want to wait for the server to confirm a change is saved before emitting the input event; therefore the parent won't update until the data is confirmed on the server.
Is there a recommended pattern for non-reactively modifying props in components, instead using the emitted input event to update, as per the Vue component prop/event specs?
Note: I already have a working example, save for the concern with separating the reactivity bit.
Related
First I want to be clear why I don't want to use Event Bus in this situation: Because Event Bus won't work for this situation!
Please see the simplified structure of my Vue.js Project first:
App.vue
|---Map.vue
|---Info.vue
| |---layerInfo.vue
|
|---WMS.vue
|---WFS.vue
|---Basic.vue
The diagram only shows which component creates which child component, but they are not all created at the start of the Vue app. The layerInfo.vue will only be created when some conditions are filled (You can image only after the use click the button, the layerInfo.vue will be rendered/created)
What have I done:
In Map.vue component, I have created a Object map, which contains the useful information, and I $emit the map to a Global Event Bus.
The Problem is, at this momente, the layerinfo.vue doesn't exist. So I can't listen to the $emit event use $on. (Even I tried, I didn't get the map)
And a further question about Event Bus: I used Event Bus in my other part of the vue app. But I am still confused, if the Event Bus makes a two-way-data-binding or only one-way?
My conclusion: global Event Bus can only be userd to pass data between two non-related components when they both exist.
But my question is: how I can then pass date between two non-related components when I don't know when the one that needs to receive the data will be created / rendered?
I have an custom component that serves as an input (in my application it does more things, but I've wanted to keep same structure so I've wrapped native input into component).
Then when user changes value of an input, I am calling closure action to format value provided by user (in example I am uppercasing it) and set it to some property (which should be visible for user in input).
Problem happens when I paste some lowercased string (for example abc), and then without deleting nor adding anything I just select everything and paste from clipboard (again abc). At second paste the formatting closure action is called, even setter of an property is called (I've tried computed property with custom set), but my component's input stays unformatted.
I've provided minimal Ember Twiddle to play with: https://ember-twiddle.com/5448bb455fd8732cc87f6ed8f2d44c12
The value is updated in action handler of application controller. At that handler, toUpperCase is called and result is set to a.
In the second call, since the a is not changed, value of my-input will not changed. So the component will not re-render. And pasted value will stay remained.
You can watch this situation by adding {{log (concat 'test' a)}} line to the application.hbs. It will printed only one time.
To make it work: Put the making uppercase logic to the my-input component. It will simply work. Have a look at this twiddle, you can implement similar component.
I am trying to create a popup dialog which asks for an input and returns the value.
I included a popup component on the root component, above the app's router outlet
In the popup component, I have an open() method which changes a boolean I called "status", which the component has an *ngIf looking at (to control the popup's appearance).
If I create a service and use an Event Emitter, I can not get a return value of the form input.
Any advice?
https://gist.github.com/alshdavid/f783ad367bc1c77cb07412ba0ea2e099
EDIT: I apologise for being bad here - Turns out I had to use a redux-style data model
You've got a small error, in that *ngFor is for iterating through a collection. You want *ngIf instead.
In terms of how you would go about implementing a popup like this, that is quite a broad question. I'll try to put together an example later.
We develop an Ember based framework for internal use of various groups within our organization. Along with this, we maintain a demo page, which displays all the components we've developed along with documentation on how to use the components. I need to modify one of the component demo pages, to allow the user to custom build the component. For example, the component has two properties showCheckboxes and showRadioButtons. By default, showCheckboxes is true, and the component, of course, displays checkboxes. I want to add a select so the user can choose between radio buttons and checkboxes. Everything is wired up correctly and the routes action gets called, but, if I select radioButtons, the component does not refresh and display readio buttons. I've set breakpoints and I see that the route is not called, so the new properties are not read. How can I force Ember to rebuild the component from scratch? I've tried this.refresh() in the route, I've tried setting the model to the new model with the changes, but the component does not redraw with the new properties. I've also tried transitionTo. But if I don't pass a model, nothing happens. But if I pass in the new route, I get this error:
Error: More context objects were passed than there are dynamic segments for the route
I hope this was clear enough for someone to provide some guidance.
Thanks
I'm trying to automate a page generated by React: record the user interaction in the page and then play it back for testing purposes.
In the simplest case, the playback sets the values of various inputs and triggers change events.
Unfortunately, after my code sets the values and simulates the click on the form submit button, React steps in and resets the values to those from its internal model.
Is there a way to force React to update from the values in the DOM?
If not, is there a way for me to hook into React and change the values, given the DOM node? Something like (totally bogus pseudocode): require("react").findComponentForDomNode('xxx').setValue('yyy') ?
Make sure that your form is using "uncontrolled" components, or at the very least that you're allowing user input in your controlled components.
http://facebook.github.io/react/docs/forms.html
Alternatively, you should be able to accomplish this with React's testing utilities:
http://facebook.github.io/react/docs/test-utils.html
This lets you perform actions such as:
React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});