脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3-reactive定义的对象数组赋值

vue3-reactive定义的对象数组如何赋值

 更新时间：2025年06月16日 09:20:14   作者：柠檬树^-^  
这篇文章主要介绍了vue3-reactive定义的对象数组如何赋值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3-reactive定义的对象数组赋值

type childEditQosItem = {
objectName: string;
attribute: string;
type: string;
valueType: string;
value: string;
};
const ruleList = reactive<childEditQosItem>([
{ objectName: "", attribute: "", type: "", valueType: "", value: "" },
]);

const data = [
{ attribute: "2", type: "3", valueType: "4", value: "6" },
{ objectName: "7", attribute: "8", type: "9", valueType: "" },
];

将 data 数组中的元素补充完整并更新到 ruleList 中。

思路

  • 类型定义：和之前一样，先定义了 childEditQosItem 类型，明确每个元素应该包含的属性。
  • 创建响应式数组 ruleList：使用 reactive 函数创建响应式数组并初始化了一个默认元素。
  • 清空 ruleList：使用 splice 方法将 ruleList 中的元素清空，为后续添加处理后的数据做准备。

使用 for...in 处理数据：

  • 外层 for 循环遍历 data 数组中的每个元素。
  • 对于每个元素，先创建一个默认的 newItem 对象，其属性都初始化为空字符串。
  • 内层 for...in 循环遍历当前元素的每个属性。使用 Object.prototype.hasOwnProperty.call 来确保只处理对象自身的属性，避免处理原型链上的属性。
  • 将当前元素的属性值赋值给 newItem 对应的属性。

更新 ruleList：将处理好的 newItem 添加到 ruleList 中。

const ruleList = reactive([
{ objectName: "", attribute: "", type: "", valueType: "", value: "" },
]);

const data = [
{ attribute: "2", type: "3", valueType: "4", value: "6" },
{ objectName: "7", attribute: "8", type: "9", valueType: "" },
];

// 清空 ruleList 原有的内容
ruleList.length = 0;

// 遍历 data 数组
for (let i = 0; i < data.length; i++) {
const newItem = {
objectName: "",
attribute: "",
type: "",
valueType: "",
value: ""
};
// 合并 data 中当前项的属性到新对象
for (const key in data[i]) {
if (data[i].hasOwnProperty(key)) {
newItem[key] = data[i][key];
}
}
ruleList.push(newItem);
}

console.log(ruleList);

这个 TypeScript 错误提示表明，你试图使用一个 string 类型的变量 key 来索引 newItem 对象，但 newItem 类型并没有定义这样的索引签名。

要解决这个问题

你可以通过类型断言或者使用类型守卫来确保 key 是 newItem 对象的合法属性名。

// 定义 childEditQosItem 类型
type childEditQosItem = {
objectName: string;
attribute: string;
type: string;
valueType: string;
value: string;
};

const ruleList = reactive<childEditQosItem[]>([
{ objectName: "", attribute: "", type: "", valueType: "", value: "" },
]);

const data = [
{ attribute: "2", type: "3", valueType: "4", value: "6" },
{ objectName: "7", attribute: "8", type: "9", valueType: "" },
];

// 清空 ruleList
ruleList.length = 0;

// 定义类型守卫函数
function isValidKey(key: string): key is keyof childEditQosItem {
return ['objectName', 'attribute', 'type', 'valueType', 'value'].includes(key);
}

for (let i = 0; i < data.length; i++) {
const newItem: childEditQosItem = {
objectName: "",
attribute: "",
type: "",
valueType: "",
value: "",
};
for (const key in data[i]) {
if (data[i].hasOwnProperty(key) && isValidKey(key)) {
newItem[key] = data[i][key] || "";
}
}
ruleList.push(newItem);
}

console.log(ruleList);

isValidKey 函数是一个类型守卫，它接受一个 string 类型的参数 key，并检查 key 是否是 childEditQosItem 类型的合法属性名。如果是，则返回 true，并且 TypeScript 编译器会将 key 的类型缩小为 keyof childEditQosItem。

在 for...in 循环中，使用 isValidKey(key) 作为类型守卫，确保只有合法的属性名才能用于索引 newItem 对象。

其中

 newItem[key] = data[i][key] || "";

在赋值时使用 || "" 运算符，若 data[i][key] 的值为 undefined 或者空字符串，就会将空字符串赋给 newItem[key]，这样就保证了赋值的类型是 string。

或者：

for (const key in data[i]) {
if (data[i].hasOwnProperty(key) && isValidKey(key)) {
const value = data[i][key];
if (value!== undefined) {
newItem[key] = value;
}
}
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue中实现表单地区选择与级联联动示例详解

    Vue中实现表单地区选择与级联联动示例详解

    这篇文章主要为大家介绍了Vue中实现表单地区选择与级联联动示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue实现图形验证码登录

    vue实现图形验证码登录

    这篇文章主要为大家详细介绍了vue实现图形验证码登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • VUE注册全局组件和局部组件过程解析

    VUE注册全局组件和局部组件过程解析

    这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • vue3.0 Reactive数据更新页面没有刷新的问题

    vue3.0 Reactive数据更新页面没有刷新的问题

    这篇文章主要介绍了vue3.0 Reactive数据更新页面没有刷新的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • 前端架构vue架构插槽slot使用教程

    前端架构vue架构插槽slot使用教程

    这篇文章主要为大家介绍了前端vue架构插槽slot使用教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-02-02
  • Element中Slider滑块的具体使用

    Element中Slider滑块的具体使用

    这篇文章主要介绍了Element中Slider滑块的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue如何实现角色权限的控制

    vue如何实现角色权限的控制

    关于角色与权限控制,通常是分为两大类,一种是菜单权限,一种是操作权限,本文将深入探讨如何通过 Vue 实现角色权限控制,特别是基于按钮级别的权限控制,需要的可以了解下
    2025-02-02
  • vue中使用echarts并根据选择条件动态展示echarts图表

    vue中使用echarts并根据选择条件动态展示echarts图表

    虽然老早就看过很多echarts的例子, 但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue中使用echarts并根据选择条件动态展示echarts图表的相关资料,需要的朋友可以参考下
    2023-12-12
  • Vue如何使用Promise.all()方法并行执行多个请求

    Vue如何使用Promise.all()方法并行执行多个请求

    在Vue中,可以使用Promise.all()方法并行执行多个异步请求,当所有请求都成功返回时,Promise.all()将返回一个包含所有请求结果的数组,如果其中任何一个请求失败,则会触发catch()方法并返回错误信息,这种方式可以显著提高程序的性能和响应速度
    2025-01-01
  • vue-router懒加载速度缓慢问题及解决方法

    vue-router懒加载速度缓慢问题及解决方法

    这篇文章主要介绍了vue-router懒加载速度缓慢问题及解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11

最新评论