this.$set修改字符串
时间: 2023-11-07 11:03:11 浏览: 135
this.$set方法用于向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。在代码中,this.$set(Array, index, newValue)用于修改数组中指定位置的元素,this.$set(Object, key, value)用于修改对象的指定属性的值。因此,this.$set可以用来修改字符串。
相关问题
this.$set(modelList[ragIndex],'asstId',asstId) 这么写为什么没生效
`this.$set` 是 Vue.js 中的一个特殊方法,用于动态添加或更新数据属性,特别是当你要修改的对象不存在于响应式系统中时。它会在目标对象上创建新的路径,并使其变为响应式的。
在给定的代码 `this.$set(modelList[ragIndex],'asstId',asstId)` 中,如果 `modelList[ragIndex]` 对象本身没有 'asstId' 属性,或者它的值不是引用类型,那么直接赋值不会触发 `$set` 的作用,因为 Vue 并不知道你改变了原始对象的结构。
可能是以下几个原因导致设置无效:
1. `ragIndex` 可能越界,尝试访问的 `modelList` 数组元素不存在。
2. `modelList[ragIndex].asstId` 已经是一个不可变的数据类型(如基本类型的数值、字符串等),Vue 不支持改变其值。
3. `asstId` 的值在尝试设置之前已经被改变,所以没有必要再进行设置。
要确保 `this.$set` 起作用,你需要确认 `modelList[ragIndex]` 是否已经存在,以及 'asstId' 是不是可以被修改的属性。如果你确定 `modelList[ragIndex]` 应该有这个属性并且需要响应式更新,你可以先检查一下属性是否已存在:
```javascript
if (!modelList[ragIndex].hasOwnProperty('asstId')) {
this.$set(modelList[ragIndex], 'asstId', asstId);
}
```
add(index) { // this.$set() this.shopcarList[index].num++; },怎么实现页面刷新后点击+1的数据不会丢失
为了实现页面刷新后点击+1的数据不会丢失,你需要将数据存储在浏览器端,可以使用localStorage或sessionStorage等浏览器提供的Web Storage API来实现。
具体实现步骤如下:
1. 在add()方法中,先将修改后的数据存储到localStorage中。
```
add(index) {
this.shopcarList[index].num++;
localStorage.setItem('shopcarList', JSON.stringify(this.shopcarList));
}
```
2. 在页面初始化时,从localStorage中读取数据并赋值给组件的数据。
```
created() {
let shopcarList = localStorage.getItem('shopcarList');
if (shopcarList) {
this.shopcarList = JSON.parse(shopcarList);
}
}
```
通过这样的实现,你可以在页面刷新后,从localStorage中读取数据,使得点击+1后的数据不会丢失。需要注意的是,localStorage只能存储字符串类型的数据,因此在存储和读取时需要进行类型转换。
阅读全文