Vue修改数组对象中的键名

Vue修改数组对象中的键名

/**
     * params date <array> 需要修改的json格式的数组
     * params newKey <string> 需要修改成的key值
     * params oldKey <string> 需要被修改的key值
     */
    changeTreeDate(zf_jsonObj, newKey, oldKey) {
      let str = JSON.stringify(zf_jsonObj);
      let reg = new RegExp(oldKey, "g");
      let newStr = str.replace(reg, newKey);
      return JSON.parse(newStr);
    },
	//使用
	this.changeTreeDate(newdata1, "label", "name");

在这里插入图片描述

如果你想在 Vue 修改数组对象的重复值,可以按照以下步骤: 1. 找到数组所有重复的值 - 可以使用 `reduce()` 方法来创建一个新的数组,只包含重复的值 - 也可以使用 `filter()` 方法来过滤出重复的值 2. 对于每个重复的值,进行修改 - 可以使用 `map()` 方法来修改每个重复的值 - 可以使用 `Vue.set()` 方法来更新 Vue 数据响应式 以下是一个示例代码,演示如何在 Vue 修改数组对象的重复值: ```vue <template> <div> <ul> <li v-for="(item, index) in modifiedArr" :key="index">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { arr: [ { id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "John" }, { id: 4, name: "Peter" }, { id: 5, name: "Jane" }, ], }; }, computed: { duplicates() { return this.arr.reduce((acc, curr, index, array) => { if (array.findIndex((item) => item.name === curr.name) !== index && acc.indexOf(curr.name) === -1) { acc.push(curr.name); } return acc; }, []); }, modifiedArr() { return this.arr.map((item) => { if (this.duplicates.indexOf(item.name) !== -1) { const newItem = { ...item, name: `${item.name} (modified)` }; Vue.set(this.arr, this.arr.indexOf(item), newItem); return newItem; } return item; }); }, }, }; </script> ``` 在上面的示例,我们使用 `computed` 计算属性来获取修改后的数组对象。首先,我们使用 `reduce()` 方法找到了所有重复的值,然后使用 `map()` 方法对每个重复的值进行了修改。在修改的过程,我们使用了 `Vue.set()` 方法来更新 Vue 数据响应式。最终输出的结果是: ```html <div> <ul> <li>John</li> <li>Jane</li> <li>John (modified)</li> <li>Peter</li> <li>Jane (modified)</li> </ul> </div> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值