<template>
<div class="app-container">
<el-form
:model="form"
:rules="rules2"
ref="form"
label-width="80px"
class="demo-ruleForm login-container"
>
<el-form-item label="用戶名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
<el-button type="text" @click="modify();">確定修改</el-button>
</div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import qs from "qs";
export default {
data() {
return {
form: {
username: "",
},
rules2: {
username: [
{
required: true,
message: "用戶名不能為空",
trigger: "blur",
},
],
},
};
},
mounted() {
var id = this.$route.query.id;
this.loadData(id);
},
methods: {
modify() {
//先判斷表單是否通過了判斷
this.$refs.form.validate((valid) => {
//代表通過驗(yàn)證 ,將參數(shù)傳回后臺(tái)
if (valid) {
axios({
url: "http://localhost:12345/api/test/Edit",
method: "put",
data: {
id: this.$route.query.id,
username: this.form.username,
},
}).then((res) => {
console.log("請(qǐng)求結(jié)果:", res);
alert(res.data.message);
this.$router.push("/list1");
});
}
});
},
loadData(id) {
let param = { id: id };
// axios.get("http://localhost:12345/api/test/Gettest2?username="+this.usernamef).then((result) => {
axios
.get("http://localhost:12345/api/test/GetItem?" + qs.stringify(param))
.then((result) => {
var _data = result.data.data;
this.form = Object.assign({}, _data);
});
},
},
};
</script>
上圖rules2下面就是驗(yàn)證,對(duì)應(yīng)form必須加ref屬性,對(duì)應(yīng)驗(yàn)證控件必須加上prop屬性,如果需要驗(yàn)證的話。如下圖:
<el-form
:model="form"
:rules="rules2"
ref="form"
label-width="80px"
class="demo-ruleForm login-container"
>
<el-form-item label="用戶名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
聯(lián)系客服