preface

This is the 8th day of my participation in the August More Text Challenge. Vue components, slots (juejin. Cn), components and slots (Juejin. Cn) Not only used components and slots, but also combined with my Blog Vue to achieve user registration, front-end regular verification and real-time display of password strength (juejin. Cn), I hope this small case to help friends who are learning Vue. Come on, mutual encouragement!

Page effect display

Demand analysis

  1. First of all, enter the user information management list, to obtain all the information data registered by the user, and dynamic rendering through the data table, each user exclusive line, and according to the user ID number given a fixed serial number.

  2. Second, the last column of the table as the column operation, and through the modify button, hidden data table, which is to fill the data into the form, automatic computing age and rendering password strength grade, at this point, the user can according to need to modify the original data in the form, the change is completed, click confirm modify completed modification operations, The form must be validated before the row data can be modified successfully, or the submission will fail!

  3. Finally, you can confirm the modification to complete an update of the row data, re-enter the user information management list, you can see the user information data has been modified; If you do not want to continue the modification operation during the modification process, you can click the back button to return to the management list page, confirm the modification target again, and make the next modification.

Code implementation

Reuse parts

How to implement the user information management list is not repeated, to obtain the specific code click here.

To update the data form code, refer to my previous blog posts and copy the portal.

The only difference is that a div is wrapped around it and a variable showFlag is bound by v-if to determine whether all user information is displayed that can be modified.

<div id="updUserInfoTable" v-if=! "" showFlag">
    <table>{... }</table>
</div>
Copy the code

Vue core code

Data binding section

data: {
    showFlag: true.users: [].targetUser: null.msg: null
}
Copy the code
  • showFlag= >Whether to display all user information that can be modified
  • users= >An array of user information
  • targetUser= >The target user object to modify

Method definition section

showTargetUserInfo: function (index) {
    // Start to update user information
    this.showFlag = false;
    // The current serial number
    var num = index.valueOf();
    this.targetUser = this.users[num];
    this.$nextTick(function () {
        this.msg = null;
        // Displays the password security strength before the change
        this.strengthShow();
    });
}
Copy the code

The showTargetUserInfo() method is used to display the user information for the specified row. Since the form is bound to the targetUser object attribute, the attribute value of the corresponding attribute name is displayed immediately after the assignment, which completes the assignment of the form.

Note:

  1. v-ifSwitching requires waiting for the page to be re-renderedDOMObject, otherwise password security strength effect can not be displayed normally, the root cause isDOM rendering in VUE is asynchronous.
  2. usethis.$nextTickDelay the callback until the next timeDOMThe update loop is then executed, at which point the problem is solved.
checkModify: function () {
    const emptyKey = isEmptyModify();
    switch (emptyKey) {
        case 'username':
            msgForUser('Username cannot be changed to null! ', emptyKey);
            break;
        case 'name':
            msgForUser('Names cannot be changed to empty! ', emptyKey);
            break;
        case 'birthday':
            msgForUser('Date of birth cannot be changed to empty! ', emptyKey);
            break;
        case 'mobile':
            msgForUser('Mobile phone number cannot be changed to empty! ', emptyKey);
            break;
        case 'password':
            msgForUser('Password cannot be changed to null! ', emptyKey);
            break;
        default:
            // Regular validation of the format of the phone number
            if(! (/^1([345789])\d{9}$/.test(this.targetUser.mobile))) {
                this.msg = 'Wrong phone number format! ';
            } else if (this.targetUser.password.length < 6 || this.targetUser.password.length > 16) {
                this.msg = 'Password must be between 6 and 16 characters long! '
            } else { 
                const updatedUser = this.targetUser;
                $.ajax({
                    type: 'POST'.url: '/user/updateUserInfo'.data: updatedUser,
                    success: function (data) {
                        handleUpdatedMsg(data);
                    },
                    error: function (error) { alert(error); }}); }}},Copy the code

The isEmptyModify() method determines whether the form is modified to empty, and if it is, the corresponding key is returned. Combined with the checkModify() method, it is used to verify the data in the modified form. If the verification fails, the corresponding form object is obtained according to the key, and then the user is reminded to modify the changed content.

After the authentication is successful, the user information update request is sent to the backend to complete the update operation.

function isEmptyModify() {
    const entries = Object.entries(vm.targetUser);
    var key = null;
    for (const [k, v] of entries) {
        if (v === null) {
            key = k;
            break;
        } else {
            if ((v.toString()).match(* $/ / ^ [])) {
                key = k;
                break; }}}return key;
}
// Perform form judgment to validate user input
function msgForUser(text, id) {
    vm.msg = text;
    const obj = $(` #${id}`);
    obj.focus();
}
Copy the code

After the modification operation is complete, the system returns the modification result, and returns to the user information management list after 750 milliseconds. In this case, you only need to set the vm.

At this point, this small case is complete implementation! Is it easy? In general, this case is based on my previous two articles, if there is no understanding, then take a look at the two blog posts I mentioned before oh ~

At the end

Writing is not easy, welcome everyone to like, comment, your attention, like is my unremitting power, thank you to see here! Peace and Love.