VueJSON寫入和讀取

這個問題有點具體，但我已經看過了，但在這里找不到答案。我正在使用 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試圖獲取所有的名字，但它會回傳這樣

P
o
s
t

我知道我現在需要獲取所有名稱和統計資訊來制作 JSON，但是制作它對我來說具有挑戰性，我需要像這樣回傳它

[
  {
    “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 不太擅長。

uj5u.com熱心網友回復：

您正在迭代您的 class Post，但您應該迭代您的Posts串列。那么日志陳述句在 Vue 應用程式之外，因此您無法訪問該串列。然后你title在類中命名它，但嘗試訪問一個名為name.

我不習慣使用 options 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));
    }
});

標籤：javascript json Vuejs3

上一篇：單擊按鈕時將組件回傳到id

下一篇：如何在某個點（75%）開始影片？