VUE中this.$set()

一、 套入例子进行分析

1-1

• 如下所示，双层遍历 得到展示列表
  

1-2 “排行榜template代码”

 <el-row class="wrapper" :gutter="20">
          <el-col :span="6" v-for="item in top_list" :key="item.id" class="toplist_item">
            <div class="coverImg">
              <el-image :src="item.coverImgUrl"></el-image>
            </div>
            <div class="toplist_wrapper">
              <h4 class="toplist_hd">{{ item.name }}</h4>
              <div class="toplist_songlist">
                <div class="songitem" v-for="(songItem,index) in songList[item.id]" :key="songItem.id">
                  <div class="songnum">{{ index+1 }}</div>
                  <div class="songinfo">
                    <router-link :to="{ path: '/song',query: { id: songItem.id } }" class="song_title">{{ songItem.name }}</router-link>
                    <div class="song_author">
                      <router-link :to="{ path: '/artist/Singer', query: { id: author.id }}" class="song_name" v-for="(author, k) in songItem.ar" :key="k">{{ k !== 0 ? ' / ' + author.name : author.name }}</router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

1-2 “排行榜”的网络请求

 // 排行榜的网络请求
    async getToplist () {
      this.$http.toplist().then((r) => {
        const { data: res } = r
        if (res.code !== 200) {
          return this.$msg.error('数据请求失败')
        }
        // console.log(res);
        return res
      }).then((r) => {
        this.top_list = r.list.splice(0, 4)
        this.top_list.forEach(async item => {
          const { data: res } = await this.$http.listDetail({ id: item.id })
          // console.log(res);
          this.$set(this.songList, item.id, res.playlist.tracks.splice(0, 6))
          // 思路如下，但是页面不显示
          // this.songList[item.id]  = res.playlist.tracks.splice(0,6)
        })
      })
    },

二、 this.$set()

vue.js官网讲解 vue.set()

1、 this.$set 的思路 如同注释行

this.$set(this.songList, item.id, res.playlist.tracks.splice(0, 6))

 // this.songList[item.id]  = res.playlist.tracks.splice(0,6)