項目開發中的問題

Vue2.* computed property ' ' was assigned to but it has no setter.

場景

export default {
    data () {
        return {
            startTime ( () => {
                ...
            }), // 此處錯誤，data只能返回簡單的值，若是是複雜的函數須要寫在computed裏
            
            endTime: new Date ()
        }
    }
}
複製代碼

修改到computed裏：

export default {
    data () {
        return {
            startTime: '', 
            
            endTime: new Date ()
        }
    },
    
    computed : {
        startTime () {
            ...
            return ... // 此處有了默認值，可是在修改值時發生錯誤，就是本次錯誤，沒有setter
        }
    }
}
複製代碼

父組件傳遞了一個屬性給子組件，子組件須要在完成某個動做以後，修改這個動做。當我將這個計算屬性在computed處理後, 再次修改的時候，會有警告並且修改沒有成功 computed property 'startTime' was assigned to but it has no setter.

分析

startTime 屬性，若是沒有設置 setter,也就是傳入的是一個函數，或者傳入的對象裏沒有 set 屬性，當你嘗試直接該改變這個這個計算屬性的值，都會報這個錯誤。

解決

須要在computed裏設置 get 和 set 函數。

computed: {
    get () {
        
    }
    
    set () {
        
    }
}
複製代碼

另外一種方法（實操）：mounted

根據需求，將 new Date()對startTime 初始化，而後在mounted裏調用方法對 startTime 再次初始化，覆蓋掉原來的值，顯示想展現的初始值。

export default {
    data () {
        return {
            startTime: new Date (), 
            
            endTime: new Date ()
        }
    },
    methods: {
        handleInit() {
            let date = new Date();
            let preDate = new Date(date.getTime() - 24*60*60*1000*180);
            this.startTime = preDate; // 覆蓋本來初始值，顯示新初始值。頁面打開時展現的是新初始值，完成需求。
            this.endTime = date;
            this.handleSeach();
        }
    }
    mounted : {
        this.handleInit()
    }
}
複製代碼

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

場景

<template>
    <row>...</row>
    <row>...</row>
</template>
複製代碼

分析

來vue模板只能有一個根對象

解決

須要用一個根節點把內容包裹起來

<template>
    <div>
        <row>...</row>
        <row>...</row>  
    </div>
</template>
複製代碼

取後臺發送的對象的key和value

場景

var data = {
  "201902" : {
    "agent" : {
      "k8s" : 80,
      "mesos" : 30,
      "k8s-zz" : 20,
      "k8s-zh" : 10,
      "mesos-zz" : 20,
      "mesos-zh" : 30,
      "k8s-zz-nw" : 30
    }
  },
  "201903" : {
    "agent" : {
      "k8s" : 30,
      "mesos" : 30,
      "k8s-zz" : 20,
      "k8s-zh" : 10,
      "mesos-zz" : 20,
      "mesos-zh" : 30,
      "k8s-zz-nw" : 30
    }
  },
  "201904" : {
    "agent" : {
      "k8s" : 40,
      "mesos" : 30,
      "k8s-zz" : 20,
      "k8s-zh" : 10,
      "mesos-zz" : 20,
      "mesos-zh" : 30,
      "k8s-zz-nw" : 30
    }
  }
}
複製代碼

分析

對於json中的<key,value>鍵值對中，key是惟一的，而value能夠是多個。在上面的例子中， 要想獲取data對象中的「201902"，須要用 Object.keys(object)，會返回一個數組，數組中是data對象的key值列表。

再使用Object.keys(object)[0]，就取到了數組的第一個元素 "201902"

解決

同理，只需遍歷Object.keys(object)數組，就能夠獲取到全部的"20190x"

使用object[key]就能夠得到value。

若要得到agent裏的key和value，須要重複上述步驟

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'split' of undefined"

場景

分析

在運行Vue項目時出現了上述錯誤，出現該錯誤的緣由是Echarts的圖形容器還未生成就對其進行了初始化所形成的

解決

利用Vue中的ref和$refs 來代替document.getElementById（）獲取該圖形容器對象