Sign in

Vue, select a data from the list, pop-up modification, how to achieve the most elegant?

bszsk edited in Sun, 20 Feb 2022

Title Description

Select one of the data in the list, click Modify, and the pop-up window will display the details. You can modify it, click OK to transfer the data to the background, and click Cancel to close the pop-up window

4 Replies
commented on Sun, 20 Feb 2022
  1. Does the whole project use self written components or component libraries like element or vuetify? If you don't use the if-v binding, you can hide a component
  2. Consider using libraries like lodash to pick, clone, and deep clone
  3. The time of deep copy doesn't need to be triggered by watch visible. When you click the "modify" button, you can make deep copy
  4. Time processing can be done at the time of saving, and it doesn't need to be triggered by watch

In a word, when you click "modify", prepare the data and modify the data bound to the bullet box to display the bullet box. When you click save, save the data and hide the bullet box. As for whether the prepared data should be destroyed after saving the data or when you cancel the modification, I don't think it is necessary to destroy it

commented on Sun, 20 Feb 2022

What I do now is to pass the variable to the pop-up component when selecting a line for editing

I use it when I mount it in the pop-up component JSON.parse ( JSON.stringify (xxx)) for deep copy. Although this is a problem for non common objects, such as date and file, generally speaking, the edited data will not contain this type Object.assign If the data contains arrays or nested objects, the original data will not be modified by mistake

The pop-up component only modifies its own deeply copied values. Submitting and closing are events passed to the parent. The parent component completes the subsequent actual submitting data and closing pop-up

In this way, the function of subcomponents is simple and convenient for modularization

commented on Sun, 20 Feb 2022

Huh? So complicated? You don't need to record the value of each time the time control changes. You just need to get the dateprop when the user clicks the "OK" button. The overall function implementation is not so troublesome: 1. The user clicks "modify", and showeditcontainer (rowvalue) passes in all the values of this line. 2. In the showeditcontainer method body, first format the rowvalue to the format you want (for example, the time format you said needs to be changed), and then fill in the corresponding edit item. 3. Users edit the items they want to change, and click "OK" button to get the current values of all items (assuming that all items have been changed by users here is relatively simple), then encapsulate them into the desired format of the back end, and send the request to the back end. 4. Close the edit box.

commented on Sun, 20 Feb 2022

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

The data you want in the pop-up window will be modified when you click the event.

lock This question has been locked and the reply function has been disabled.