Vue项目 会员页 字符串转对象

后端数据为字符串：

[{"label":"每天免费学课程","icon":1},{"label":"W3C标准技术","icon":1},{"label":"快捷易懂的学习方式","icon":1},{"label":"在线实例测试工具","icon":1},{"label":"自律的学习模式","icon":1}] 

方法：

item.interests = JSON.parse(item.interests);

Member.vue

<!--体验会员-->
          <div
            class="item-normal"
            v-for="(item, index) in vipArr"
            :key="index"
            :style="'background:' + item.bgColor"
          >
            <div class="item-title">
              <div class="item-title-img">
                <img :src="item.vipIcon" alt="" />
              </div>
              <div
                class="item-title-title"
                :style="'color:' + item.vipNameColor"
              >
                {{ item.vipName }}
              </div>
              <div class="title-tuijian" v-if="item.isRecommend === 1">
                <img src="../assets/image/member/tuijian.png" alt="" />
              </div>
            </div>
            <div class="item-desc">{{ item.vipDesc }}</div>
            <div class="item-price" :style="'color:' + item.fontColor">
              <div class="item-price-fuhao">￥</div>
              <div class="item-price-num">{{ item.price }}</div>
              <div class="item-price-time">
                元/{{ item.termNumber }}{{ item.termType }}
              </div>
            </div>
            <div class="item-start-box">
              <button
                class="item-start-btn btn-animate"
                :style="'background:' + item.btnBgColor"
              >
                <span style=""> 立即开通</span>
              </button>
            </div>
            <ul class="item-list">
              <li v-for="(x, y) in item.interests" :key="y">
                <div>{{ x.label }}</div>
                <div>
                  <i
                    :class="x.icon === 1 ? 'el-icon-success' : 'el-icon-error'"
                  ></i>
                </div>
              </li>
            </ul>
          </div>

 data() {
    return {
      vipArr: []
    };
  },
 created() {
    this.getAllVips();
  },
 methods: {
    //获取所有会员信息
    getAllVips() {
      api.getAllVips().then((res) => {
        console.log(res, "vip");
        console.log(res.data.list[0].interests, "列表");//打印出 字符串
        res.data.list.forEach((item) => {
          item["fontColor"] = "#dc985e";
          item["btnBgColor"] = "#dc985e";
          item["bgColor"] = "#ffffff";
          item["btnFontColor"] = "#ffffff";
          item["vipNameColor"] = "#333333";
          if (item.isRepeat === 0) {
            item["fontColor"] = "#999999";
            item["btnBgColor"] = "#dddddd";
            item["bgColor"] = "#f7f8fa";
            item["btnFontColor"] = "#666666";
            item["vipNameColor"] = "#333333";
          }
          if (item.isRecommend === 1) {
            item["fontColor"] = "#ffffff";
            item["btnBgColor"] = "linear-gradient(#fcc994,#f6a967)";
            item["bgColor"] = "#0d0d0d";
            item["btnFontColor"] = "#ffffff";
            item["vipNameColor"] = "#e0e0e0";
          }
          //字符串转对象
          item.interests = JSON.parse(item.interests);
          console.log(res.data.list[0].interests, "列表");//打印出 对象
          switch (item.termType) {
            case 1:
              item.termType = "日";
              break;
            case 2:
              item.termType = "月";
              break;
            case 3:
              item.termType = "年";
              break;
          }
        });
        this.vipArr = res.data.list;
      });
    },
  },