Vue项目对数据模型进行扩展属性

Vue项目对数据模型进行扩展属性

  // 扩展属性categoryName
  for (let i = 0; i < articles.value.length; i++) {
    // 这里用的不是遍历出id然后调用接口进行查询
    // 这里用的是遍历两个列表，进行id的比对然后获取值进行属性扩展
    let article = articles.value[i]
    // 再次遍历，遍历分类列表
    for (let j = 0; j < categorys.value.length; j++) {
      if (article.categoryId==categorys.value[j].id) {
        article.categoryName = categorys.value[j].categoryName
      }
    }
  }

这段代码通常在前后端分离的Web开发中，特别是在Vue.js、React.js等前端框架中进行数据处理时会用到。具体场景如下：

假设你从后端API获取了两组数据：

1. articles：文章列表，其中每篇文章都有一个categoryId属性，代表所属的分类ID。
2. categorys：分类列表，其中每条分类记录都有一个id和categoryName属性。

当你需要在前端展示文章列表时，不仅需要展示文章标题、内容等信息，还需要显示文章对应的分类名称。但由于后端返回的文章列表并未直接提供分类名称，而是提供了分类ID，这时就需要借助categorys列表通过比对ID来补充文章的categoryName属性。

这段代码的核心作用就是在前端将文章列表中的每一项与其关联的分类名称进行关联，最终使得文章对象中包含了完整的分类信息，便于后续渲染时直接使用。