免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
成功element ui輸入驗(yàn)證

<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>

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
前端與移動(dòng)開發(fā)----Vue---- json-server-安裝及基本使用,axios基本使用,偵聽器
React 實(shí)戰(zhàn) Todolist (上)
仵航說(shuō) 前后端分離,文件上傳下載(springBoot+vue+elementUI)仵老大
vue.js+flask+element
vue結(jié)合element_ui,統(tǒng)一驗(yàn)證管理
vuejs中使用axios時(shí)如何追加數(shù)據(jù)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服