Vue 3 is a progressive framework for web development, this opensource project is a power tool in web developer kit. It's fast, lightweight and easy to learn. Version 3 has many performance upgrade from Vue 2.

Template refs

In addition to reactive ref vue also provide template ref which allow us to access the DOM element directly. This will allow us locate a an element in the template and perform operations such set focus.

Form and ref

To set a ref for form input we have to name a ref using ref="nameref" (template) and can access it using this.$refes.nameref. We can call focus function to focus the field.

We can set a ref to form or input field, when a ref is set to input , the form ref not work. To set a ref to form use ref="myForm".

       <el-form         label-width="80px"         size="mini"         ref="ruleForm"       >

We can perform reset field action using a handler, in @click set the following handler.

     resetForm() {       this.$refs.ruleForm.resetFields();     },
This free site is ad-supported. Learn more
​