Vue如何用this.$set改变数组里的某个值
更新时间：2022年12月19日 09:35:19 作者：HqL丶1024
这篇文章主要介绍了Vue用this.$set改变数组里的某个值,文中通过示例代码介绍了vue中this.$set()的用法----更新数组和对象的值，需要的朋友可以参考下
Vue用this.$set改变数组里的某个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<title>表格数据分页</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="vue">
<div id="app">
<p v-for="item in items" :key="item.id">{{item.message}}</p>
</div>
</div>
</body>
<script>
new Vue({
el: "#vue",
data: {
items: [
{ message: "one", id: "1" },
{ message: "two", id: "2" },
{ message: "three", id: "3" },
],
},
methods: {},
mounted() {
let that = this;
// this.items[0] = { message: "first", id: "4" }; //此时对象的值更改了，但是视图没有更新
let art = { message: "first", id: "4" };
this.$set(this.items, 0, art); //$set 可以触发更新视图
},
});
</script>
</html>补充知识：
下面看下vue中this.$set()的用法----更新数组和对象的值
我们先看看官网给出的解释：
1、更新数组:
我们有一个数组，包括人员姓名和人员年龄两个属性。
想要实现在页面刚加载的时候改变姓名为李四的人的信息。
首先我们想到的是在mouted函数中直接修改name为李四的人的信息
this.itemList[1] = {
name: '李思思',
age: 30
}
console.log(this.itemList[1]);
但是这时候控制台打印的数据更新了，但是页面视图却没有更新。这时候我们就需要用到this.$set()来更新视图了。
<!-- 使用$set更新数组的值 -->
<ul>
<li v-for="(item,index) in itemList" :key="index">
<div>
<span>姓名：</span>
<span>{{item.name}}</span>
<span>年龄：</span>
<span>{{item.age}}</span>
</div>
</li>
</ul>
data() {
return {
itemList: [
{
name: "张三",
age: 18,
},
{
name: "李四",
age: 20,
},
{
name: "王五",
age: 22,
},
],
person: {
name: '前端劝退师'
}
}
},
mounted() {
// 要求
// 修改数组中姓名为李四的人的信息
// this.itemList[1] = {
// name: '李思思',
// age: 30
// }
// console.log(this.itemList);
console.log("======================");
this.$set(this.itemList, 1, {
name: '李思思',
age: 30
});
},
2、更新对象：
eg:给对象添加一个属性并赋值，上代码：
<!-- 使用$set更新对象的值-----给对象添加属性 -->
<div style="display:flex;">
<p>{{person.name}}</p>
<el-input v-model="person.score" style="width:200px;"></el-input>
</div>
<el-button @click="addScore">自定义成绩</el-button>
methods: {
addScore() {
this.person.score = "60"
console.log(this.person);
// this.$set(this.person, "score", "60");
}
}
在button事件点击的时候给person对象添加score属性，发现：
我们发现控制台打印的结果显示给person对象添加了score属性并赋值了60，但是在页面上并没有更新新加的score属性和它对应的值，这时候便使用this.$set()来更新视图层了。
methods: {
addScore() {
// this.person.score = "60"
// console.log(this.person);
this.$set(this.person, "score", "60");
}
}
这时候就显示合适了。
注意：this.$set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值。
到此这篇关于Vue用this.$set改变数组里的某个值的文章就介绍到这了,更多相关Vue用this.$set改变数组某个值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇使用vue-resource进行数据交互的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
经过一段时间的探索,前端后端都有大致的样子了,下面就是部署到服务器,这篇文章主要给大家介绍了关于将VUE项目部署到服务器的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vuejs第七篇之Vuejs过渡动画案例全面解析的相关资料,需要的朋友可以参考下2016-09-09
本文主要还是针对 Vue.js 2.x 版本，毕竟接下来一段时间，Vue.js 2.x 还是我们工作中的主流版本，对vue.js性能优化技巧相关知识感兴趣的朋友一起看看吧2021-09-09
vue3在自定义hooks中使用useRouter报错的解决方案
这篇文章主要介绍了vue3在自定义hooks中使用useRouter报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Element UI中v-infinite-scroll无限滚动组件使用详解
在移动端数据的更新中许多方法孕育而生,无限滚轮也是解决的方案一种,Element-ui为vue开发了一个事件（v-infinite-scroll）,下面这篇文章主要给大家介绍了关于Element UI中v-infinite-scroll无限滚动组件使用的相关资料,需要的朋友可以参考下2023-02-02
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要介绍了vue router 跳转时打开新页面的示例方法，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
今天小编就为大家分享一篇基于element-ui的rules中正则表达式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue.js中Line第三方登录api实现代码，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
最新评论