2020 年 9 月 16 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

vue.js 利用 json 資料設定 model 裡輸入欄位的 prop 值

1 min read
心之芳庭

心之芳庭

vue.js 利用 json 資料設定 model 裡輸入欄位的 prop 值

 

Element UI 是基於 vue.js 的前端 HTML 用戶操作界面的元件,它就像是 FreeMarker 一樣,可以簡化且快速的產生用戶的操作界面,Element UI 與 FreeMarker 兩者相互搭配可以提升開發效率。

<el-form v-bind:model="formData" ref="formData" v-bind:rules="formRules" @submit.prevent.native="submitForm('formData')" >                   
<div class="row">
 <div class="col-sm-6">
  <el-form-item prop="username" label="帳號" >
  <el-input clearable v-model="formData.username" ></el-input>
  </el-form-item>
 </div>
 <div class="col-sm-6">
  <el-form-item prop="email" label="Email" >
  <el-input clearable v-model="formData.email" ></el-input> 
  </el-form-item>
 </div>                     
</div>
<div class="row">
 <div class="col-sm-6">
  <el-form-item prop="pass" label="Password" >
  <el-input clearable v-model="formData.pass" show-password ></el-input>    
  </el-form-item>
 </div>
 <div class="col-sm-6">
  <el-form-item prop="checkPass" label="Confirm Password" >
  <el-input clearable v-model="formData.checkPass" show-password ></el-input>   
  </el-form-item>
 </div>                     
</div>
<div class="row">
 <div class="col-sm-6">
  <el-form-item prop="firstName" label="姓" >
  <el-input clearable v-model="formData.firstName" ></el-input> 
  </el-form-item>
 </div><div class="col-sm-6">
  <el-form-item prop="lastName" label="名" >
  <el-input clearable v-model="formData.lastName" ></el-input>  
  </el-form-item>
 </div>                     
</div>
 <el-form-item>
 <el-button type="primary" class="btn btn-primary btn-sm" @click="submitForm('formData')">存檔</el-button>                
 </el-form-item>
</el-form>

 

由上面的程式碼,可以快速產生下面的畫面

vue.js uses json set prop value

 

若要一次賦予 formData 裡各個輸入欄位的值,可以使用 this.formData=JSON.parse('{"username":"admin",...}'); 來簡化。

new Vue({
    el: "#app",
    data() {      
      return {        
        formData: {
          username: '',
          firstName: '',
          lastName: '',
          email: '',
          pass: '',
          checkPass: '',
          
        }
      };
    },
    mounted() {
        this.formData=JSON.parse('{"username":"admin","firstName":"app","lastName":"admin","pass":"","checkPass":"","email":"abc"}');
    },
    methods: {
        submitForm(formName) {      
      this.$refs[formName].validate((valid) => {
        if (valid) {
            console.log('submit!!');
            
         
        } else {
          console.log('error submit!!');
          return false;
        }
      });
  },
  resetForm(formName) {
    this.$refs[formName].resetFields();
  }    
    }
})

 

也可以用 axios 先向後端要資料,再塞回 formData 裡。若發現資料沒有塞入 formData 裡,則可以下用列兩種方法之一來解決。

  • 第一種是先設立一個私有變數: var self = this;
mounted() {
var self = this;
axios.post('/auth/user/userProfile/getFormData')
   .then(function (response) {
     self.formData = response.data.formData; 
   })
   .catch(error=> {
         
     console.log(error);
   })
   .finally(() => {
    this.fullscreenLoading = false;
   });
}

 

  • 第二種是加 .bind(this)
mounted() {
axios.post('/auth/user/userProfile/getFormData')
 .then(function (response) {
   this.formData = response.data.formData; 
 }.bind(this))
 .catch(error=> {
       
   console.log(error);
 })
 .finally(() => {
  this.fullscreenLoading = false;
 });
}

 

 

 

 

Copyright © All rights reserved. | Newsphere by AF themes.