项目开发中的问题

694 阅读3分钟

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

在此处即使用`data[201902]` 获得 `agent` 对象

若要获得agent里的key和value,需要重复上述步骤

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

场景

分析

在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的

解决

利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象