项目开发中的问题

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（）获取该图形容器对象