vue修改数组中某一条数据，并且更新页面中的数据

最新推荐文章于 2023-08-10 16:45:56 发布

原创最新推荐文章于 2023-08-10 16:45:56 发布 · 5.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在Vue中使用Vue.set方法来更新数组内的对象属性，以确保视图能够正确响应变化。通过实例展示了如何遍历数组并使用Vue.set方法设置特定对象的属性值。

直接用vue的的set方法就好了，示例：

Vue.set(object, key, value)

import Vue from "vue";


this.positionListData.forEach((item,index)=>{
				if(item.id==val.id){
					console.log("set");
					Vue.set(this.positionListData[index],'post_status',1)
				}
			})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bittingCat

关注关注

3
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue实现todolist效果（增删改查和本地存储状态）

wzsrlndm的博客

09-28

1159

效果图实现每一项的独特命名来实现删除添加选取的精准操作需要在终端安装nanoid 指令为npm i nanoid并在header页中配置可以根据功能来拆分组件共可以拆分组件分别为MyHeader MyItem MyFooter添加My的作用主要是用来防止标签与html5中新增标签起冲突，而MyItem中包含MyList组件组件创建完成后需要在App.vue中注册 App的所有代码 <template> <div id="app"> ...

vue 数组指定位置添加数据_VUE 响应式原理源码：带你一步精通 VUE

weixin_39917576的博客

11-21

1610

作者 | 爱编程的小和尚责编 | 王晓曼出品 | 优快云博客学过 VUE 如果不了解响应式的原理，怎么能说自己熟练使用 VUE，要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE，这篇文章通过300多行代码，带你写一个简易版的 VUE，主要实现 VUE 数据响应式 (数据劫持结合发布者-订阅者)、数组的变异方法、编译指令，数据的双向绑定的功能。本文需要有一定 VUE 基础，并不适合新手学...

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

【JavaScript源代码】vue列表数据删除后主动刷新页面及刷新方法详解.docx

12-29

vue列表数据删除后主动刷新页面及刷新方法详解　　前端删除一条数据或者新增数据后，后端操作成功，但前端不会自动刷新，需要重新刷新当前页面（用vue-router重新路由到当前页面，页面是不进行刷新的 ,采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载）　　provide / inject 组合　　作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。　　(声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载)　　App.vue 代码：　　<template

Vue数组变更方法和替换方法

munangs的博客

08-10

5131

Vue数组变更方法和替换方法：filter() concat() slice() push() pop() shift() unshift() splice() sort() reverse()

Vue基础之数组更新

qq_41720578的博客

04-11

3676

Vue的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新： • push() • pop() • shift() • unshiht（） • splice() • sort() • reverse() 使用以上方法会改变被这些方法调用的原始数组，有些方法不会改变原数组，例如： • filter() • concat() • slice() 它们返回的是一个

vue更新列表其中一列数据的方法

qq_41758763的博客

10-30

2323

在列表中会对其中一列进行操作，之后需要更新这一列的数据，这个时候我们有两种方法去更新，一种是更新全部，这时候只需要想列表重新获取数据就可以了，但是这种方法需要重新加载整个页面，很不友好，另一种是只更新需要更新的这一列数据，怎么更新呢？ 1、增加一个点击事件 <van-popup get-container="body" v-model="actSheetOpt.show" :title="actSheetOpt.title"

Vue实现动态添加或者删除对象和对象数组的操作方法

10-17

总的来说，Vue 实现动态添加或删除对象和对象数组的关键在于理解数据驱动视图的原理，即通过修改 `data` 中的数组来更新视图。使用 `push`、`splice` 等数组方法，结合 Vue 的响应式系统，可以轻松实现这类功能。...

vue数据更新UI不刷新显示的解决办法

11-19

在Vue.js中，数据绑定是其核心特性之一，然而在实际开发中，有时会出现数据已经更新，但用户界面（UI）并未反映出这些变化的情况。这通常由于Vue的响应式系统无法检测某些特定的数据更改方式导致的。下面我们将深入...

详解vue模拟加载更多功能（数据追加）

12-03

vue2清空数组了但是视图没有更新

jieyucx的博客

03-20

2648

vue2清空数组了但是视图没有更新

vue.js 强行赋值、刷新数组或者对象方法之 $.set()

weixin_30525825的博客

08-23

2607

实际开发过程中，数据交互的的时候需要赋值，刷新，但是不可能每次赋值之后都刷新整个页面，所以就要用到 vue.js方法 $.set()，能实现赋值对象的局部刷新语法：Vue.set(object, key, value) （vm.$set （）也可以这么写，vm是实例化对象） object ：赋值对象 key：赋值对象里面要赋值的字段 value：赋给字段的值例如： ...

【笔记】vue的set方法更新一个新字段/新数组

hamal_ye的博客

01-07

3359

在vue实例里面，更新一个data对象里面没有初始化过的新字段/新数组，如果只是类似对象赋值的写法，是不会被重新挂载到页面实例中的，此时就要用到vue的set方法更新字段格式：Vue.set(target_position, newKey, newValue); 更新数组格式：Vue.set(target_position, index, newValue); 写个小例子在下方： v...

vue修改数组元素方法

weixin_34151004的博客

04-24

1069

示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-

Vue 中通过 ID 替换数组中的某一条

huqiang1995的博客

06-02

1534

【代码】Vue 中通过 ID 替换数组中的某一条。

VUE 列表组件刷新修改元素内属性触发列表刷新

ZH_CS的博客

01-07

4420

在vue中，如果data中有一个元素 fileList 使用了列表显示，当fileList对象发生变化时，显示组件会跟随刷新，但是当fileList内的元素某个值发生变化是，其绑定的组件是不刷新的。

XAMPP中Error: Apache shutdown unexpectedly.

qq_43558459的博客

12-13

271

解决方法：修改端口号步骤1 点击config 修改里面的httpd.conf 默认是80，可以修改成81 步骤2：修改httpd-ssl.conf里面的端口号默认是443，可以自定义修改。然后再重新start Apache就好啦！

Vue项目使用keep-Alive实现详情页返回列表页后保存查询条件

yuanfanlove的博客

11-08

2811

1、最近做vue前端项目中，有个需求是从订单的列表页面(list.vue)进入详情页(detail.vue)之后返回订单列表页(list.vue)里面查询条件需要被保留之前的数据 2、从其他页面比如首页(home.vue)进入订单的列表页面(list.vue)时候是不需要缓存数据保留之前操作查询。因此参考vue的文档说明，选择用keep-Alive来缓存页面,下面简单描述我的步骤代码：路由配置router.js 在路由选项中，配置meta属性，需要缓存的页面设置keepAlive为true即为需要缓

Vue使用v-for显示列表时，数组里的item数据更新，视图中列表不同步更新的解决方法

qq_38472535的博客

04-12

633

Vue使用v-for显示列表时，数组里的item数据更新，视图中列表不同步更新的解决方法

Vue方法中修改数组某一项元素而不能响应式更新

weixin_30827565的博客

07-01

602

<template> <div> <ul> <li v-for="(item, i) in ms" :key="i">{{item}}</li> </ul> <button @click="change()">点击</button> </...

uniapp vue3 tabar页面数组多条数据页面上只显示2条数据每10秒更新一次数据循环

最新发布

06-06

### 实现方案在 UniApp 和 Vue3 项目中实现一个 tabar 页面，该页面需要显示数组中的多条数据，但仅展示其中的两条数据，并且每 10 秒更新一次数据，循环显示。可以通过以下方式实现： #### 数据结构与逻辑 - 使用一个数组存储所有数据。 - 定义两个变量：`currentIndex` 表示当前显示数据的起始索引，`displayCount` 表示每次显示的数据数量（这里是 2）。 - 使用 `setInterval` 每隔 10 秒更新一次数据，调整 `currentIndex` 的值以实现循环显示。 #### 代码实现以下是完整的代码实现： ```vue <template> <view class="tabar-container"> <view v-for="(item, index) in displayedData" :key="index" class="data-item"> {{ item }} </view> </view> </template> <script> export default { data() { return { allData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'], // 所有数据 currentIndex: 0, // 当前显示数据的起始索引 displayCount: 2, // 每次显示的数据数量 intervalId: null // 定时器 ID }; }, computed: { displayedData() { // 根据当前索引和显示数量获取部分数据 return this.allData.slice(this.currentIndex, this.currentIndex + this.displayCount); } }, mounted() { // 启动定时器，每 10 秒更新一次数据 this.intervalId = setInterval(() => { this.updateDisplayedData(); }, 10000); // 每 10 秒触发一次 }, beforeDestroy() { // 组件销毁时清除定时器 if (this.intervalId) { clearInterval(this.intervalId); } }, methods: { updateDisplayedData() { // 更新当前索引，实现循环显示 this.currentIndex += this.displayCount; if (this.currentIndex >= this.allData.length) { this.currentIndex = 0; // 循环回到开头 } } } }; </script> <style> .tabar-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .data-item { margin: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; text-align: center; } </style> ``` #### 关键点解析 1. **数据切片** 使用 `Array.prototype.slice` 方法从 `allData` 中提取部分数据[^1]。`slice` 方法不会修改原始数组，而是返回一个新的子数组。 2. **定时更新** 使用 `setInterval` 方法每隔 10 秒调用一次 `updateDisplayedData` 函数，调整 `currentIndex` 的值以实现数据的动态更新[^2]。 3. **循环逻辑** 当 `currentIndex` 超过数组长度时，将其重置为 0，从而实现数据的循环显示[^3]。 4. **生命周期管理** 在组件的 `mounted` 钩子中启动定时器，在 `beforeDestroy` 钩子中清除定时器，避免内存泄漏[^4]。 --- ### 注意事项 - 确保 `allData` 数组中的数据量足够支持循环显示，否则可能会出现显示异常。 - 如果需要动态加载数据，可以结合接口请求更新 `allData` 数组。 ---