debugger error resolution
Sometimes strange grammatical problems appear in the compiler. For example, an error is reported after typing the debugger. At this time, you can press ctrl+z to go back, and it may be fine to go back to the beginning and start again.
CookieUtils
CookieUtils.get gets the value through the key, so search cookieUtils.set globally to view the key-value pair settings
interface
If the interface returns an error such as 1001, first debug in the interface document, it is likely that the interface is wrongly written.
methods:{
//获取课程管理
getClassInfoList(){
admin.getClassInfoList(this.$store.state.schoolId).then(
res=>{
if(res.code==1000){
this.tableData=res.data;
}
else{
this.$message.error("获取课程列表失败！")
}
}
)
},
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
border
style="width: 100%;overflow: auto"
height="calc(100vh - 260px)"
ref="table">
t
return{
tableData:[],
```
for element`——el-button
The disabled attribute of the button, if dynamic binding is required, a colon must be added to recognize it later.
<el-button
type="text"
size="small"
@click="open"
:disabled="Boolean(scope.row.isPublic)"
>公开</el-button
>
在这里插入代码片
kick you out
Mainly look at two places: 1. Example 2. Documentation-Configuration Item Manual
The histogram is in the bar in the series, and the style is called itemStyle.
In the template, just use a div with an id.
<el-card style="margin-top: 4vh">
<div style="height: 35vh" id="questionChart"></div>
</el-card>
Define a method to apply in mounted
created() {
this.$nextTick(() => {
this.questionChartInit();
});
},
The basics are like this, get the element by id and assign it to the variable
showBars() {
var chartDom = document.getElementById("questionSchool");
var myChart = echarts.init(chartDom);
let option = {
title: {
text: "各学校对应题目统计",
// subtext: 'Fake Data',
left: "left",
},
xAxis: {
type: "category",
data: ["1016系统演示", "东北大学", "管理员专属", "虚拟教研室"],
},
yAxis: {
type: "value",
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
series: [
{
barWidth: 30,
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
},
],
};
The complex method defined (should be like this after connecting the interface)
questionChartInit() {
this.$api.dev.getSchoolList().then(async (res) => {
var x_data = [];
var y_data = [];
for (var j = 0; j < res.data.length; j++) {
var r = await this.$api.dev.getSchoolClassQuestionNum(res.data[j].id);
for (var i = 0; i < r.data.classData.length; i++) {
x_data.push(r.data.classData[i]);
y_data.push(r.data.questionData[i]);
}
}
var chartDom = document.getElementById("questionChart");
var myChart = echarts.init(chartDom);
let option = {
title: {
text: "各教师对应课程统计",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
// label:{
// formatter:(param)=>{
// console.log(param)
// return param.value
// }
// }
},
},
xAxis: {
type: "category",
data: ["张胜军", "王植", "郭甲腾", "兰天"],
axisLabel: {
rotate: 50,
},
},
yAxis: {
type: "value",
},
series: [
{
barWidth: 30,
data: [10, 20, 30, 43],
type: "bar",
itemStyle: {
color: "#9FE080",
},
},
],
};
myChart.setOption(option);
});
},
! not operator
should be in quotes
debug
In the developer tool, you can break the point, follow the code to see if he has entered a certain function, and if
you find a problem, see the error report
common mistakes
Method (function) must remember to add parentheses! ! !
With parentheses is a method, without parentheses is a variable! ! !
If this. is not written in vue, the error method undefined will be reported.
Remember to write this.!!! The interface is not called, a large part of the reason is that this is not written. .
Remember to rename the copied things first. . .