账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue 动态渲染的表单，如何进一步对其进行更新操作？
    48
    0

    问题描述

    现在，从后台获取数据，然后在页面渲染，同时要实现，可以针对特定的表单进行更新操作，

    后台的数据：数组的形式

    academic: [{academicId: "19226765bc92408aa33d7dd9667a8d9d", resumeId: "201811231065820579901607936",…}]
0: {academicId: "19226765bc92408aa33d7dd9667a8d9d", resumeId: "201811231065820579901607936",…}

    现在的做法

    我的做法：对数组使用v-for进行遍历输出，显示没有问题，但是针对每个表单进行更新操作，会没有效果；

    相关代码

    • template代码
    <el-form v-for="(itemForm, index) in educationData" :key="index" ref="itemForm" :model="itemForm" :rules="educationRules" label-width="120px">

        <!-- 简历ID -->
        <el-form-item label="简历ID" prop="resumeId" v-show="false">
          <el-input v-model="itemForm.resumeId" placeholder="请输入真实姓名">
          </el-input>
        </el-form-item>
        ……
        
        <el-form-item>
          <el-button type="primary" @click.native.prevent="updateSubmit('itemForm')">
            更新
          </el-button>
          <el-button type="primary" @click.native.prevent="delSubmit(itemForm.educationId)">
            删除
          </el-button>
        </el-form-item>
</el-form>
    • script代码
    // 更新
    updateSubmit(formName) {
      console.log(`${formName}`);
        educationUp(formName).then(res => {
            // console.log(res);
            let {code, data, msg } = res;
            if (code == 100200) {
              this.message("更新成功", "success");
         
            } else {
              this.message(res.msg, "error");
            }
        })
    },

    你期待的结果是什么？实际看到的错误信息又是什么？

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 伤 普通会员 1楼

      在 Vue 中，你可以使用 watch 模块来监听数据的变化，并在数据变化时执行相应的操作。以下是一个简单的例子，展示如何使用 watch 来动态更新表单：

      ```javascript

      ```

      在这个例子中，我们使用了两个 watch，一个来监听 name 的变化，另一个来监听 email 的变化。当 name 或 email 的值发生改变时，watch 将自动触发相应的函数，即 handler 函数。handler 函数接收新的值，并在 this 对象上执行相应的操作。

      在 submitForm 方法中，我们只是简单地打印出了表单提交时的值，但是你可以根据需要编写更多的逻辑，例如保存表单数据到数据库，或者发送电子邮件等。

      注意，watch 是一个双向绑定的监听器，这意味着当表单数据发生变化时，Vue 调用相应的函数。这使得你的应用程序能够自动地更新和响应数据的变化。

    0 打赏 回复
    • 结尾的故事 普通会员 2楼

      在 Vue 中，你可以使用 watch 模块来监听数据的变化，并在数据变化时执行相应的操作。以下是一个简单的例子，展示如何使用 watch 来动态更新表单：

      ```javascript

      ```

      在这个例子中，我们使用了两个 watch，一个来监听 name 的变化，另一个来监听 email 的变化。当 name 或 email 的值发生改变时，watch 将自动触发相应的函数，即 handler 函数。handler 函数接收新的值，并在 this 对象上执行相应的操作。

      在 submitForm 方法中，我们只是简单地打印出了表单提交时的值，但是你可以根据需要编写更多的逻辑，例如保存表单数据到数据库，或者发送电子邮件等。

      注意，watch 是一个双向绑定的监听器，这意味着当表单数据发生变化时，Vue 调用相应的函数。这使得你的应用程序能够自动地更新和响应数据的变化。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部