Vue JSON 读写

Question

这个问题有点具体，但我已经看过，但在这里找不到答案。我正在使用 Vue3 并尝试编写 JSON 然后阅读它。不过，我不是 100% 确定它是如何工作的。这是我的 js 文件中的内容：

class Post {
        constructor(title, link, img, rank) {
          this.title = title;
          this.link = link;
          this.img = img;
          this.rank = rank;
        }
      }

      const app = new Vue({
        el: "#app",
        data: {
          search: "",
          postList: [
            new Post(
              "Monke",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "Queen",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "Bly",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "Blqc",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "BlqckLight",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "BlqckKing",
              "test.html",
              "head.png",
              "Admin"            
            ),

            new Post(
              "BlqckWTF",
              "test.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "BlqckFTW",
              "test1.html",
              "head.png",
              "Admin"
            ),

            new Post(
              "BlqckQueen",
              "test.html",
              "head.png",
              "Admin"
            )
          ]
        },

        computed: {
          filteredList() {
            return this.postList.filter((post) => {
              return post.title
                .toLowerCase()
                .includes(this.search.toLowerCase());
            });
          }
        }
      });
      
    for (let i = 0; i < Post.length; i++) {
        console.log(Post.name[i])
    }

console.log 正在尝试获取所有名称，但它 return 会像这样

P
o
s
t

我知道我现在需要获取所有名称和统计数据才能制作 JSON，但制作它对我来说具有挑战性，我需要 return 像这样

[
  {
    “name”: “Monke”,
    “link”: “test.html”,
    “img”: “head.png”,
    “rank”: “Admin”
  },
  {
    “name”: “Bly”,
    “link”: “test.html”,
    “img”: “head.png”,
    “rank”: “Admin”
  }
]

等很抱歉，如果之前有人问过并回答过这个问题，但我就是找不到。

然后我想阅读我拥有的JSON文件

  JSON.parse(readFileSync(“players”).toString())

很抱歉给您带来不便，但我对 JSON 不是很好。

Answer 1

您正在迭代 class Post，但您应该迭代 Post 列表。然后log语句在vue app之外，所以访问不到list。然后您在 class 中将其命名为 title 但尝试访问名为 name.

的属性

我不习惯使用选项 API，但您可以尝试在您的应用程序中安装挂钩：

class Post {
    constructor(title, link, img, rank) {
        this.title = title;
        this.link = link;
        this.img = img;
        this.rank = rank;
    }
}

const app = new Vue({
    el: '#app',
    data: {
        search: '',
        postList: []
    },
    computed: {
        filteredList() {
            return this.postList.filter((post) => post.title
                .toLowerCase()
                .includes(this.search.toLowerCase());
            });
        }
    },
    mounted() {
        this.postList = JSON.parse(readFileSync('players').toString());
        this.postList.forEach((post) => console.log(post.title));
    }
});

Vue JSON 读写

Vue JSON Write & Read

javascript

json

vuejs3