时间戳

首页 > 解决方案 > 如何为每个新评论创建一个新 ID，同时确保它与使用 Vue.js 从 Api 获取的其他评论不冲突？

javascript - 如何为每个新评论创建一个新 ID，同时确保它与使用 Vue.js 从 Api 获取的其他评论不冲突？

问题描述

我正在构建一个从 API 获取数据的小型博客。API 返回一个对象数组，每个对象包括帖子，有时还包括另一个包含评论和特定评论 ID 的对象。如何收集使用过的 ID，以便在添加另一条评论时它是唯一的，而不是已经使用过的？

获取的数据示例：

{
  "articles": [
    {
      "id": "111",
      "title": "How do like them apples?",
      "text": "Lorem ipsum elit ante aliquam blandit nulla gravida, elementum sollicitudin ipsum litora rhoncus urna, nec in pulvinar quam libero dictumst. Duis hac augue auctor sed proin senectus ante purus est, condimentum mattis nostra non porttitor sit nibh ornare etiam quisque eros ultricies eget taciti inceptos etiam ornare feugiat pretium. Varius ullamcorper imperdiet tortor quisque odio ullamcorper pulvinar, tortor semper primis consequat libero erat, adipiscing mi donec semper duis magna.",
      "author": "simon",
      "category": "mobile",
      "comments": [
        {
          "id": "1",
          "author": "shaun",
          "text": "Lorem ipsum varius senectus nostra lectus nunc sollicitudin."
        },
        {
          "id": "2",
          "author": "william",
          "text": "aliquam blandit nulla gravida"
        }
      ]
    },
    {
      "id": "112",
      "title": "The new normal....",
      "text": "Lorem ipsum molestie inceptos ullamcorper vel faucibus curae amet, lacinia et euismod tempus fringilla blandit litora risus in, accumsan mollis netus leo posuere adipiscing aliquam.Nibh nunc volutpat integer class mollis tellus cubilia, quisque elit proin sagittis netus cubilia, per aenean neque est dictum phasellus sapien eget fringilla ligula hac nostra platea.",
      "author": "william",
      "category": "mobile",
      "comments": [
        {
          "id": "3",
          "author": "shaun",
          "text": "lacinia et euismod tempus fringilla blandit"
        }
      ]
    }

标签： javascriptvue.js

解决方案

您的 Vue 数据中应该有一个“id”数组，如下所示：

var vm = new Vue({
    ...
    data:{
        ids : []
    }
})

从 API 获取对象后，您应该检查它是否已经存在：

var vm = new Vue({
    ...
    methods:{
        getPosts: function() { ... },
        insertId: function(id){
         if(this.ids.includs(id)){
             //handle the duplicate id
         }
    }
})

推荐阅读