vue3数据回显与双向绑定

待我称王封你为后i 2023-10-11 15:21 9阅读 0赞

vue3版本中是实现数据绑定为通过新的ref与reactive函数实现

<template>
      <div>
        <a-button type="primary" @click="getData"> 点击查询下一个 </a-button>
        <br />
        <a-button type="primary" @click="print"> 打印表单数据 </a-button>
    
        <a-form-model layout="inline" v-model="data">
          <a-form-model-item>
            <input type="text" v-model="data.sndeptname" />
          </a-form-model-item>
          <a-form-model-item>
            <input type="text" v-model="data.sguid" />
          </a-form-model-item>
        </a-form-model>
      </div>
    </template>
    
    <script>
      let ids = [
        '102fbf4469504161bd4cdd55643f8f55',
        '004b272af923401abefa7161265efbd7',
        '38d680d60ad8845b3d5e1c26048564af',
      ];
    
      let index = 0;
    
      import {
         defineComponent, reactive,ref } from 'vue';
      import DeptAPI from '../../../utils/sys/api/deptAPI';
      import {
         result } from '../../../utils/config/dev';
      import {
         message } from 'ant-design-vue';
      export default defineComponent({
        
        name: 'Employ',
        setup() {
        
          let data = ref({
        
            sndeptname: '',
            sguid: '',
          });
    
          function print() {
        
            console.log(data.value.sndeptname);
            console.log(data.value.sguid);
          }
    
          function getData() {
        
            if (index == 3) {
        
              index = 0;
            }
            DeptAPI.deptInfo(ids[index++]).then((res) => {
        
              if (res.code === 20000) {
        
                data.value = res.obj.data;
              } else {
        
                message.info(res.msg);
              }
            });
          }
    
          return {
        
            data,
            getData,
            print,
          };
        },
      });
    </script>
    
    <style scope></style>