Javascript 基于HTML中条件的状态加载图标

我正在尝试将一些奖学金加载到用户的提要中，当用户单击书签按钮时，书签按钮会更改图标。但是，我想知道是否有一种方法可以根据用户是否已经将特定的奖学金书签加载到书签图标中。例如，图标将初始化并显示为已填充。代码如下：

 <!--Individual Scholarship Cards-->
          <div id="scholarship-list">
            <div id="scholarship-card" v-for="scholarship in scholarships" v-bind:key="scholarship.id">
              <h3>
                {{ scholarship.name }}
              </h3>
              <h4>
                {{scholarship.date}}
              </h4>
              ...
              <!--Bookmark Button-->
              <div id="bookmarking">
                <button id="bookmark-button" @click="buttonClicked(scholarship.id)">
                  <template v-if="!bookmarked[scholarship.id - 1]">
                    <i class=bookmark-icon> </i>
                  </template>
                  <template v-if="bookmarked[scholarship.id - 1]">
                    <i class=bookmark-filled></i>
                </template>
                </button>
                <!--Bookmark Button Number Display-->
                <button id="bookmark-counter">
                  {{scholarship.numBookmarks}}
                </button>
              </div>

{{scholarship.name}
{{奖学金日期}
...
{{scholarship.numBookmarks}}

Javascript:

//Created Lifecycle Hook
  created() {

    //Fetch Scholarships
    fetch(apiURL)
      .then(response => {
        return response.json();
      })

      //initialize them all as not being bookmarked
      .then(scholarships => {
        this.scholarships = scholarships;
        var i;
        for ( i = 0; i< this.scholarships.length; i++ ) {
          this.bookmarked[i] = false;
        }
      }),

    
    //Fetch all bookmarks
    fetch(bookURL)
      .then(response => {
        return response.json();
      })
      .then (bookmarks => {
        this.bookmarks = bookmarks;
        var i;

        //If the bookmark element in the array has the same user_id as the current user,
        //change their bookmarked status to "true"
        for (i = 0; i < this.bookmarks.length; i++) {
          if (this.bookmarks[i].userID == localStorage.getItem("id")) {
            this.bookmarked[this.bookmarks[i].scholarshipID-1] = true;
          }
        }
      }),

//创建了生命周期挂钩
创建（）{
//获取奖学金
获取（APIRL）
。然后（响应=>{
返回response.json（）；
})
//将它们全部初始化为未被书签
。然后（奖学金=>{
这就是奖学金；
var i；
对于（i=0；i{
返回response.json（）；
})
。然后（书签=>{
this.bookmarks=书签；
var i；
//如果数组中的bookmark元素与当前用户具有相同的用户id，
//将其书签状态更改为“true”
对于（i=0；i

按钮点击（id）{
//通过用户要添加书签的奖学金id（位置）
const scholarship=this.scholarship.find（s=>s.id==id）；
//检查数组中的奖学金是否与传入的奖学金具有相同的id
this.scholarshipclicked=scholarship.id；
//如果这是“第一次”单击书签按钮，
//在前端、后端数组和数据库中为奖学金的书签值添加1
如果（！this.bookmarked[id-1]）{
1.numBookmarks+=1；
this.bookmarked[id-1]=true；
//向数据库添加书签
获取（bookURL{
方法：“张贴”，
正文：JSON.stringify({
id:this.bookmarks.length+1，
userID:localStorage.getItem（“id”），
学衔：id
}),
标题：{
“内容类型”：“应用程序/json；字符集=UTF-8”
}
})
.then（response=>response.json（））
.then（json=>console.log（json））
//向后端Javascript数组添加书签
this.newBookmark={id:this.bookmarks.length+1，userID:localStorage.getItem（“id”），scholarshipID:id}
this.bookmarks.push（this.newBookmark）；
}
否则{
//如果这是第二次按下书签按钮，请从奖学金书签值中减去1
//在前端、后端阵列和数据库中
1.numBookmarks-=1；
this.bookmarked[id-1]=false；
//删除书签
var i；
变量selectedOne=0；
//如果奖学金id书签与奖学金id匹配，且用户id与书签的用户id匹配，则删除
对于（i=0；iresponse.json（））
.then（json=>console.log（json））
}
获取（bookURL）
。然后（响应=>{
返回response.json（）；
})
。然后（书签=>{
this.bookmarks=书签；
})
}  
}

正如您所看到的，我现在让它在单击时更新书签图标，但我想知道是否有办法在初始化期间更改它们

 buttonClicked(id) {
      //passes in the id (position) of the scholarship the user would like to bookmark
      const scholarship = this.scholarships.find(s => s.id === id);
      //checks to see if any scholarship in the array has the same id as the one pass in
      this.scholarshipclicked = scholarship.id;
     
      //if this is the "first" time the bookmark button is being clicked, 
      //add 1 to the scholarship's bookmark value in the frontend, backend array, and database
      if (!this.bookmarked[id-1]) {
        scholarship.numBookmarks += 1;
        this.bookmarked[id-1] = true;
        
        //Add Bookmark to Database
        fetch (bookURL, {
          method: "POST",
          body: JSON.stringify ({
            id: this.bookmarks.length + 1,
            userID: localStorage.getItem("id"),
            scholarshipID: id
          }),
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          }
        })
        .then (response => response.json())
        .then (json => console.log(json))

        //Add bookmark to backend Javascript Array
        this.newBookmark = {id:this.bookmarks.length + 1, userID: localStorage.getItem("id"), scholarshipID:id}
        this.bookmarks.push(this.newBookmark);
      }
      else {
        //If this is the second time the bookmark button is being pressed, subtract 1 from the scholarship's bookmark value
        //in the frontend, backend array, and database
        scholarship.numBookmarks -= 1;
        this.bookmarked[id-1] = false;

        //DELETE Bookmark
        var i;
        var selectedOne=0;

        //If the scholarship id bookmark matches the scholarship's id, and the user's id matches the bookmark's user_id, delete
        for (i = 0; i < this.bookmarks.length; i++) {
          if (this.bookmarks[i].userID == localStorage.getItem("id") && this.bookmarks[i].scholarshipID == id) {
            
            this.bookmarks.splice(i,i);
            selectedOne = i+1;
            fetch (bookURL + "/" + selectedOne, {
              method: "DELETE"
            })
            
            for (var j= i; j < this.bookmarks.length; j++) {
              //ok we need to repeatedly uh fetch patch the bookmarks id, and then do a final patch to get them to update the id for javascript
              fetch(bookURL + "/" + (j+1), {
                method: "PATCH",
                body: JSON.stringify ({
                  id: j
                })
                ,
                headers: {
                  "Content-Type": "application/json; charset=UTF-8"
                }
              })
              .then (response => response.json())
              .then (json => console.log(json))
            }

            fetch (bookURL)
              .then (response => {
                return response.json();
              })
              .then (bookmarks => {
                this.bookmarks = bookmarks;
              })
          }  
        }