vue中為computed計算屬性傳參遇到的問題,已解決


首先介紹下項目背景,

需要將 dataList 中的 item.stars 屬性傳入 computed 返回要展示的值

部分代碼如下(請不要糾結為什么這么做,數據格式確認如此):

      <li class="recommend-list-item border-bottom"
          v-for="item of recommendList"
          :key="item.id"
      >
         <div class="recommend-list-item-comments">
            <span>{{stars(item.star)}}星</span>
          </div>
      </li>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommendList: [
        {
          id: '0001',
          imgUrl: '/static/imgs/list/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg',
          title: '故宮',
          star: [1, 1, 1, 1, 1],
          comments: '32879',
          price: '¥60',
          location: '東城區',
          desc: '世界五大宮之首,穿越與您近在咫尺'
        }
]
   }
},
computed: {
stars: function (star) {
var count = 0
star.forEach((item, index) => {
    if (item) {
count++
}
})
return count
}
}
}
}

看起來完美,npm run start ,頁面一刷,報錯了!

看見度娘有類似問題~點進去一看,需要閉包

修改后代碼如下:

  computed: {
    stars: function () {
      return function (star) {
        var count = 0
        star.forEach((item, index) => {
          if (item) {
            count++
          }
        })
        return count
      }
    }
  }

再刷新一下,OK啦~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM