html 表單修改
~~~
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="關鍵詞" prop="keyword">
<el-input v-model.trim="form.keyword" class="w-500" :maxlength="12"></el-input>
</el-form-item>
<el-form-item label="內容" prop="text">
<el-input v-model="form.text" type="textarea" :rows="4" class="w-500"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="edit('form')" :loading="isLoading">提交</el-button>
<el-button @click="goback()">取消</el-button>
</el-form-item>
</el-form>
~~~
調取數據方法命名: getInfo()
~~~
getInfo()
{
this.form.id = this.$route.params.id
this.apiGet('admin/text/' + this.form.id).then((res) => {
this.handelResponse(res, (data) => {
this.form = data
})
})
}
~~~
修改表單方法
~~~
edit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
this.isLoading = !this.isLoading
this.apiPut('admin/text/', this.form.id, this.form).then((res) => {
this.handelResponse(res, (data) => {
_g.toastMsg('success', '編輯成功')
setTimeout(() => {
this.goback()
}, 1500)
}, () => {
this.isLoading = !this.isLoading
})
})
}
})
}
~~~
完整代碼
~~~
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-menu"></i> 編輯文本回復</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="form-box">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="關鍵詞" prop="keyword">
<el-input v-model.trim="form.keyword" class="w-500" :maxlength="12"></el-input>
</el-form-item>
<el-form-item label="內容" prop="text">
<el-input v-model="form.text" type="textarea" :rows="4" class="w-500"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="edit('form')" :loading="isLoading">提交</el-button>
<el-button @click="goback()">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import http from '../../../../assets/js/http'
import fomrMixin from '../../../../assets/js/form_com'
export default {
data() {
return {
isLoading: false,
form: {
id: null,
keyword: '',
text: ''
},
rules: {
keyword: [
{ required: true, message: '請輸入關鍵詞' }
],
text: [
{ required: true, message: '請輸入內容' }
],
}
}
},
methods: {
edit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
this.isLoading = !this.isLoading
this.apiPut('admin/text/', this.form.id, this.form).then((res) => {
this.handelResponse(res, (data) => {
_g.toastMsg('success', '編輯成功')
setTimeout(() => {
this.goback()
}, 1500)
}, () => {
this.isLoading = !this.isLoading
})
})
}
})
},
getInfo() {
this.form.id = this.$route.params.id
this.apiGet('admin/text/' + this.form.id).then((res) => {
this.handelResponse(res, (data) => {
this.form = data
})
})
}
},
created() {
this.getInfo()
},
mixins: [http, fomrMixin]
}
</script>
~~~
