vue3.x增加数据功能

具体代码

<template>
  <el-form :model="form" :rules="rules" ref="ruleFormSSS" label-width="120px">
    <el-form-item label="用户姓名" prop="name">
      <el-input v-model="form.name"/>
    </el-form-item>
    <el-form-item label="用户年龄" prop="age">
      <el-input v-model="form.age"/>
    </el-form-item>
    <el-form-item label="用户家乡" prop="jia">
      <el-input v-model="form.jia"/>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="onSubmit('ruleFormSSS')">添加</el-button>
      <el-button>取消</el-button>
      <el-button @click="test">测试</el-button>
    </el-form-item>
  </el-form>
</template>

<script scoped setup>
import { reactive ,ref,unref} from 'vue'
import axios from 'axios'
import router from '@/router'
// do not use same name with ref
const ruleFormSSS=ref(null);
const form = reactive({
  name: '',
  age: '',
  jia:'',
})

const rules = {
  name: [
    { required: true, message: '请输入用户姓名'},
  ],
  age: [
    { required: true, message: '请输入用户年龄'},
  ],
  jia: [
    { required: true, message: '请输入用户家乡'},
  ]
}


const onSubmit = async () => {
  const that =this;
  const fff = unref(ruleFormSSS);
  //console.log("fff  "+fff);
  if (!fff) return
  try {
    await fff.validate()
    console.log("1111")
    const {name, age,jia} = form
    console.log(name,age,jia);
    console.log("2222")
    axios.post('http://localhost:8181/student/save',form).then(Response=>{
      console.log("data  "+Response.data);
      if(Response.data=="success"){
        router.push('/one');
        alert("添加成功！");
      }
    })
  } catch (error) {
    console.log("--------------"+form)
  }

  return{
    form,
    rules,
    onSubmit,
    fff
  }
}

const test = () => {
  console.log(form)
}

</script>