vue中重置element-ui表單操作要求

<el-form :model="loginForm" ref="loginFormRef">      // 1. 需要給表單指定  ref 屬性 , 可以理解為表單的 名字
        <!-- 用戶名 -->
        <el-form-item prop="username">   // 2. 需要給 需要重置 的表單項指定 prop 屬性, 值為 表單 loginForm 中的 username
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
            placeholder="請輸入用戶名"
          ></el-input>
        </el-form-item>
        <!-- 密碼 -->
        <el-form-item prop="password">    // 2. 同上
          <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="請輸入密碼"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button size="medium" type="primary">登錄</el-button>
          <el-button size="medium" @click="reset" type="info">重置</el-button>   // 3. 給重置的按鈕綁定 click事件
        </el-form-item>
      </el-form>

data: function() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  }

  methods: {
    // 表單的重置功能
    reset() {
      console.log('123')
      this.$refs.loginFormRef.resetFields()     // 4. 通過this.$refs.(上面提到的表單名字) 調用API resetFields(), 即可實現表單的重置
      //   console.log(this.$refs[formName])
    }
  }