This pointing problem based on this.$ in Vue

This pointing problem with this.$()

I encountered a problem in the project. An error occurred when resetting component data with this.$() because the rule rules in form use this writing method.

as follows:

rules: {
        code: [this.$()],
        name: [this.$()],
        age: [
          {min: 1, max: 120, type: 'number', message: 'Ages 1 to 120', trigger: 'blur'}
        ],
        email: [
          {type: 'email', message: 'The email format is incorrect', trigger: 'blur'}
        ]
      },

This.$rules is a custom global variable. I think it may be because of the problem pointed by this, so the $ object cannot be found.

First of all, we know that this.$() in vue can get the original data value (read-only), this.$data can get the data in the current state. When resetting the data data, just copy and reassign it.

as follows:

(this.$data, this.$());

This is, if your data data uses this writing method, an error will be reported when calling this.$() because this pointing inside data() is incorrect.

There is an explanation for the pointing problem of data in the vue documentation

as follows:

If you use an arrow function for the data property, this will not point to an instance of this component, but you can still access its instance as the first parameter of the function.

data: vm => ({ a:  })

This is a method, and another method is to specify this for the data function when called.

as follows:

(this.$data, this.$(this));

vue operation this.$()

Reset the data data of the vue component

In the vue single file component, sometimes you need to reset the data in the data, such as half of the form is filled in, and the user wants to refil it.

<script>
    export default {
        data() {
            return {
                // Form                form: {
                    input: ''
                }
            }
        },
        ...
        methods: {
            // Reset form method            retset() {
                 = this.$().form;
            }
        },
        ...
    }
</script>

You can also reset the entire $data by assigning a value to the component $data object to reset it

this.$data = this.$();

Let's summarize

The vue component can obtain any method you wrote through this.$options object, such as the created( ) lifecycle function, and discover new vue gameplay

The above is personal experience. I hope you can give you a reference and I hope you can support me more.