In vue, select a piece of data from the list to modify the pop-up window, how to achieve the most elegant?

topic description

For the data in the

list, select one, click modify, and the pop-up window displays the details. You can modify it. Click OK to forward the data, and click cancel to close the pop-up window

.
Element-ui vue.js
Mar.29,2021

what I'm doing now is to pass the variable to the pop-up component when a row is selected for editing.

I use JSON.parse (JSON.stringify (xxx) to make a deep copy when I mounted in the pop-up widget. Although this is a problem for unusual objects, such as Date,File, generally speaking, the edited data does not contain this type. In this way, compared with Object.assign, if the data contains arrays or nested objects, there will be no reference problems and mistakenly modify the original data.

the pop-up window component only modifies its own deeply copied values, commit and close are events passed to the parent, and the actual submitted data and the actual action of closing the pop-up window are handed over to the parent component.

in this way, the function of the component is relatively simple and convenient for modularization.

HM? Is it that complicated? There is no need to record the value of each change in the time control, you just need to get the dateProp when the user clicks the "OK" button. The realization of the whole function is actually less troublesome:
1. The user clicks "modify", showEditContainer (rowValue) to pass in all the values of this row
2. In the body of the showEditContainer method, first format the rowValue to the format you want (such as the time format you said you want to change), and then fill in the corresponding editing items.
3. The user edits the item you want to change, click the "OK" button, and you get the current value of all items (it is assumed that all the item users have changed it is relatively simple), then encapsulate it into the format that the backend wants, and send the request to the backend.
4. Close the edit box.

  1. does the entire project use self-written components or component libraries like Element or Vuetify? If it is a component library, then binding a piece of data can show or hide the pop-up box without v-if (a little more elegant? )
  2. consider using libraries such as lodash for pick, clone, deepClone
  3. the timing of deep copy does not need to be triggered by watch visible. You can make a deep copy when you click the modify button
  4. time processing can be done at save time, and there is no need to trigger
    5. through watch.

all in all, prepare the data when you click "modify", modify the data bound to the pop-up box to display the pop-up box, save the data when you click save, and hide the pop-up box
as to whether the prepared data should be destroyed after saving the data or canceling the modification, you don't have to destroy it.

you said you wanted to use computed, but you didn't see it in your code.
besides, is watch necessary?

you pop up the data you want in the window and click on the event to modify it.

Previous: Why is the result of baidu keyword taken by python3 different from the result actually searched through the browser?

Next: How do I get the value of a variable with a specified name? What should I ask?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu