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