vue computed 使用小問題

TNFE 發布于2019-08-22 10:36 / 600人閱讀

這個是一個vue 中 computed 的一個小問題
解決方案是通過提issue 解決的，issue鏈接

Vue.js version

1.0.26

實例

jsfiddle

代碼部分


  
    添加 {{ goods | json }}
    
 {{ result }}

new Vue({
  el: "#app",
  data: {
    goods: [],
  },
  methods: {
    add() {
      const good = {
        number: 1
      };
      this.goods.push(good);
      console.log(this.goods);
    }
  },
  computed: {
    // 一個計算屬性的 getter
    result: function() {
      let number = 0;
      for (let i in this.goods) {
        number += this.goods[i].number;
      }
      return number;
    }
  }
})

關鍵的部分是在

    // 一個計算屬性的 getter
    result: function() {
      let number = 0;
      for (let i in this.goods) {
        number += this.goods[i].number;
      }
      return number;
    }

采用這樣的計算方式在特定的手機上是有問題的，

測試結果

左邊是 ios 9.3.4 iphone 6 plus
右邊是我的小米手機

有問題的設備

ios 9.3.3 and 9.3.4 iphone 6s plus or iphone 5s

沒問題的設備

ios 8.2 iphone 6 ，some android phone，PC chrome

解決方案

改變一下寫法就可以了

  result: function() {
    return this.goods.reduce((sum, good) => sum + good.number, 0)
  }

具體是因為什么造成的可能涉及的比較多，我就暫時不去探討了。
另外在寫js 的時候最好遵守 airbnb 規則，可以更好的避免出現問題

GPU云服務器云服務器 vue使用webrtc vue 中使用 webrtc vue怎么使用webRTC vue中使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90924.html

終極蛇皮上帝視角之微信小程序之告別 setData

摘要：而小程序官方的是在中調用方法來改變數據，從而改變界面。為了寫測試讓咱們來重構一把，利用學習過的函數式編程中的高階函數把依賴注入。也就是說當中的某個數據更新的時候，我們并不知道它會影響哪個中的屬性，特別的還有依賴于的情況。眾所周知 Vue 是借助 ES5 的 Object.defineProperty 方法設置 getter、setter 達到數據驅動界面，當然其中還有模板編譯等等其他...

wuyumin 2019-08-23 10:58 評論0 收藏0
從 VantComponent 談小程序維護

摘要：不多廢話，先說結論小程序組件寫法這里就不再介紹。在官方文檔中，我們可以看到使用構造器構造頁面事實上，小程序的頁面也可以視為自定義組件。經過一番測試，得出結果為為了簡便。畢竟官方標準，不用擔心其他一系列后續問題。在開發小程序的時候，我們總是期望用以往的技術規范和語法特點來書寫當前的小程序，所以才會有各色的小程序框架，例如 mpvue、taro 等這些編譯型框架。當然這些框架本身對于新開...

worldligang 2019-08-23 17:10 評論0 收藏0
美團小程序框架mpvue蹲坑指南

摘要：這個是我們約定的額外的配置這個字段下的數據會被填充到頂部欄的統一配置美團汽車票同時，這個時候，我們會根據的頁面數據，自動填充到中的字段。美團小程序框架mpvue(花名：沒朋友)蹲坑指南第一次接觸小程序大概是17年初,當時小程序剛剛內側,當時就被各種限制折騰的死去活來的,單向綁定,沒有promise,請求數限制,包大小限制,各種反人類,...反正我是感受到了滿滿的惡意.最近接到一個工...

AprilJ 2019-08-22 16:01 評論0 收藏0
Vue中如何使用方法、計算屬性或觀察者

摘要：如何實現一個查看在線在中我們放置了一些事件處理方法，我們可以在事件綁定中直接應用，不會依賴于任何的屬性。例如計算屬性依賴于屬性，只要屬性發生變化，我們的也會發生變化，從而篩選出我們需要的數據。熟悉 Vue 的都知道方法methods、計算屬性computed、觀察者watcher 在 Vue 中有著非常重要的作用，有些時候我們實現一個功能的時候可以使用它們中任何一個都是可以的，但是...

zhaot 2019-08-23 12:37 評論0 收藏0
vue中的computed的this指向問題

摘要：今天在寫項目時，用到了計算屬性，遇到了使用箭頭函數出現指向問題，這里記錄下箭頭函數中的箭頭函數內部的是詞法作用域，由上下文確定函數體內的對象，就是定義時所在的對象，而不是使用時所在的對象中的使用箭頭函數不使用箭頭函數使用自己的理解在中使用箭今天在寫vue項目時，用到了computed計算屬性，遇到了使用箭頭函數出現this指向問題，這里記錄下 1.箭頭函數中的this 箭頭函數內部...

crossoverJie 2019-08-23 13:53 評論0 收藏0