Vue 修改传递数据

最新推荐文章于 2024-08-08 22:30:15 发布

宝儿的程序生涯

最新推荐文章于 2024-08-08 22:30:15 发布

阅读量1.3k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/fengtingyan/article/details/108462457

版权

本文介绍如何在Vue中实现个人中心页面的数据修改并实时更新到页面上。通过路由传参的方式处理信息获取，但这种方式并不适用。改用其他方法后，实现了数据成功传递和页面显示的同步。

摘要由CSDN通过智能技术生成

想做一个什么功能呢？
哝，就是个人中心页面去请求的后台的数据然后渲染到页面
姓名，座位号，联系方式，现在呢需要修改这些信息然后保存以后会更新到页面上
在这里插入图片描述
显然点小箭头跳转过去获取这个信息我采用了路由传参的形式这样是不对的

个人中心页面

<div class="line"><span>姓名</span>
  <input id="name" readonly type="text" v-model="name">
  <a class="mui-action-back mui-icon mui-icon-back" v-if="!online"  @click="rename">
    <div class="line_img"></div>           
  </a>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

宝儿的程序生涯

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue页面间传输数据、接收数据方法以及注意事项

m0_66757598的博客

05-17

2402

扩展内容：http://www.javashuo.com/article/p-edvpxhjw-ca.html

vue只提交表单修改的数据

yjh525096890的博客

08-20

1631

vue表单提交只提交已修改数据公司新需求只提交表单中已修改的数据，前思后想，因为后台返回的数据是没有数据的字段是没有返回的，所以难题就出来了终于打磨出来了直接上代码 1.区分原始数据和表单数据 2.比较差异的方法，将原始数据与表单数据进行对比，然后推到一个新的全局对象里（注：声明两个新数组，循环表单对象，和原始对象并推到数组里，对数组进行去重，然后循环去重后的数组，进行属性对比，如果不一样或者undefined就循环到新的对象里） diffFormData() { const oldArr= []

参与评论您还未登录，请先登录后发表或查看评论

vue调用更新接口只传更新的参数给后端

weixin_42584507的博客

01-04

294

在 Vue 中，可以使用 axios 库调用更新接口。axios 提供了 patch 方法来只传递更新的参数给后端。例如： axios.patch('/api/update-item', { name: 'new name' }) .then(response => { console.log(response) }) .catch(error => { console....

VUE删除和修改数据

最新发布

m0_73570063的博客

08-08

1325

我们设计编辑按钮时，使其弹出一个弹出框，在弹出框中进行数据的编辑并保存，是和新增数据相同的思路，在事件@click下，@click="edit(scope.$index,scope.row)"，传入两个参数，一个是下标一个是数据。和删除操作不同的是，添加数据的按钮不能放在每行数据上，新增按钮应该放在表单头部上，每次点击新增按钮都弹出一个弹出框，我们输入数据后点击弹出框中的确认按钮，数据就存入了数据库中，并且新添加的数据会自动刷新出到网页上来。编辑数据是针对某行数据进行更改，只需要将按钮放在每行数据后。

Vue3+ts使用pinia传递数据,修改数据

wtd183833501176的博客

09-20

2038

毫无关系的组件之间的传值,使用pinia,实时修改pinia中想要传递的值

修改一个表格中的内容，把表格中多条数据提交给后台

qq_43038965的博客

09-09

1226

通常情况下，我们做的数据修改功能，都是在表格每一行数据的后边添加“编辑”按钮，把这一条数据传递到后台，类似于下图这样的修改方式，只是针对于一条数据。但是要提交整个表格就不适用了。类似于这样需求是点击“编辑”按钮，表格进入可编辑状态（这也是个头疼的问题），然后修改数据，保存提交。首先，我在考虑怎么让表格进入可编辑状态，这个问题上，查了很多资料，如果前端用bootstrap，...

vue 修改 data 数据问题并实时显示的方法

10-18

本篇文章将深入探讨如何正确地修改Vue实例中的`data`数据，并确保这些更改能在界面上实时显示。首先，我们需要理解Vue实例化过程。当你创建一个新的Vue实例时，你需要传递一个`data`对象，这个对象中的所有属性会...

Vue 父子组件的数据传递、修改和更新方法

08-27

然而，可以使用props从父组件向子组件传递数据。若需要父组件实时更新子组件的状态，可以通过子组件触发自定义事件（`$emit`）来实现。例如，子组件中可以这样触发事件： ```javascript this.$emit('updateData', ...

vue.js组件之间传递数据的方法

10-19

Vue.js组件之间传递数据是构建复杂应用的关键技术。在Vue.js中，组件实例的作用域是独立的，这意味着每个组件都有自己的数据和方法，不能直接访问其他组件的数据。因此，了解如何在组件间传递数据至关重要。首先，...

vue组件中的数据传递方法

08-27

组件之间传递数据大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据；子组件向父组件传递数据，通过 events 传递数据；两个同级组件之间传递数据，通过 event bus 传递数据。一、父组件向子组件传递...

传参只传修改的数据

陈志航1995的博客

02-11

915

本方法适用于在修改页面中本次接口提交的参数只传入本次改变的数据的时候使用。 //检测是否有修改的数据 checkedUpdateData(oSrcData,newData){ if(oSrcData instanceof Object){ let tmpSrcData={} for(let key in oSrcData){ if(oSrcData[key] instanceof Objec...

EasyUi的datagird页面表单、弹出添加修改框、特定列编辑传值给后端、ajax传对象向后台

weixin_45764675的博客

09-07

727

一、前段页面EasyUi做的单位建设性质项目编码项目名称为es索引，搜索数据库筛选过滤条件。时间插件只能选择年份，选择对应的年份会展示所有该年份的项目对应投资金额，并且会有汇总行，展示所欲查到的数据投资金额汇总只要不选不选择时间插件的过滤，所有的汇总值显示的是该项目所有年份汇总值的总和只有选择年份以后查到的结果才可以对投资金额单元格进行编辑，点击按钮可以保存，如果该年投资值存在则修改不存在则添加该项目该年的投资值废话不多说直接上代码：主页面project.html <!

vue修改代码同步页面_vue如何实现两个页面的数据同步

weixin_39673002的博客

12-19

994

例如有A,B两个页面,要实现A页面的数据修改时,B页面的数据也同时变化.且在同时打开两个页面的情况下我尝试过用Vuex,然后发现修改完A页面的数据后,B页面的数据仍然没有变化.//A.vue{{getName}}更名{{getName}}export default {computed:{getName(){return this.$store.state.name}},methods:{chan...

vue - 简单实现数据回显

m0_55969466的博客

01-11

1万+

简单记录自己写的数据回显，比较复杂如果有更好的方法请指正我是用判断来显示通过值来判断可否点击 //这块是判断是否显示哪一个输入框 <template v-if="isInput"> <van-field v-model="repeatauthInfo.repeatbankNo" label="本人实名银行卡" name="本人实名银行卡2"

在vue的methods中的函数调用另一个函数的返回值

热门推荐

qq_39040192的博客

05-22

2万+

调用函数 baseStation.flow(newList[i].element_name,function(fl){ newList[i].flow = fl; }); 被调用函数新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会...

vue之首页的分类与上拉加载更多

weixin_47409897的博客

10-18

441

目录首页的分类Home.vueArticalDetail.vue 首页的分类功能： 1：一开始先获取到 tab 菜单的数据 001 然后定义一个方法，对里面的 tab 中的 item每一项数据操作，添加list(数据)，还有page等 002 然后获取每一项根据当前item的id 发起请求获取到item的数据用于渲染数据 003 002之中需要拿到当前 tab中的item选中的拿到当前item，也就是需要点击的时候，监听active的变化去实现的！ 2：上拉加载更多 001：先

vue3数据回显与双向绑定

qq_43750656的博客

02-08

2613

vue3版本中是实现数据绑定为通过新的ref与reactive函数实现 <template> <div> <a-button type="primary" @click="getData"> 点击查询下一个 </a-button> <br /> <a-button type="primary" @click="print"> 打印表单数据 </a-button> <a-form-m

vue 页面回显后台传回的数据，且页面数据不清空

Seriously_的博客

10-19

4189

当我们在用vue的时候，有的时候我们需要在jsp上回显从后台传回来的数据，但是这时候就会发现，大家利用 $("#").val(); 这种方法给页面上的input赋值的时候，数据的确是赋值给了你想要的那个input中了，但是当我们再在这个页面中填数据的时候，你赋值的那个input的value就会消失，一开始以为是form表单给清空了，后来把form标签删掉了，还是出现了那个value值不见了...

Vue——get调用后端接口并将数据回显到table中

HoShining日志

10-10

1万+

get带参数呈现效果（动态获取后台数据） 1.HTML < template> <el-table :data="tableData"> //这里的tableData在2.script -> export default -> data -> return 中定义 <el-table-column prop="taskName" label="项目名称"> </el-table-column&gt