vue踩坑：Property or method “form“ is not defined...Cannot read property ‘netName‘ of undefined..._form is not defined

页面组件渲染不成功

（1）错误

（2）解决
这个错误真的排除了一遍又一遍，重新编译，修改变量名，删除变量名都会报这个错误，最后经过一个一个字母的核对，才发现自己是将data()给写成了date()…

<script>
	export default {
		name: "LAN",
		date(){
			return{
				form:{
					netName: '',
					dhcp: false,
1
2
3
4
5
6
7
8

修改

<script>
	export default {
		name: "LAN",
		data(){
			return{
				form:{
					netName: '',
					dhcp: false,
1
2
3
4
5
6
7
8

get请求时报错(1)

（1）错误：get请求不成功

（2）解决
在挂载的钩子函数里面调用函数：

mounted() {
	this.$fun.GET();
	console.log(this.form);
},
1
2
3
4

此处调用是从fun.js文件中调用这个函数，在这里也不知道为什么会行不通了，因此我在这个vue文件里重新声明了GET函数：

mounted() {
	this.GET();
	console.log(this.form);
},
methods: {
	GET(){
		this.$axios.postJson(this.$urls.API,{
			session: Lockr.get(this.$constant.SESSION),
			call:{
				service: this.$constant.SYSTEM,
				method: this.$urls.GETLAN
			},
			params:{}
		}).then((res) => {
			if(res.code === 0){
				this.form = res.data;
			}
		});
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

get请求时报错(2)

（1）错误:get数据时，仅显示网卡名称

（2）解决

在response中可以发现，数组返回时已经正确，但是无法传递到前端页面，说明前端数据格式定义存在问题，例如form.mac，修改为form.ipv4.mac，这是前后端分离而数据格式不匹配所带来的错误

保存时报错(1)

（1）错误
点击保存以后，有数据但无法上传，提示如下：

（2）解决

rules:{
	ip: [{required: true, message: this.$t('ip can not null'),trigger: 'blur'}],
	netmask: [{required: true, message: this.$t('netmask can not null'),trigger: 'blur'}],
	gateway: [{required: true, message: this.$t('gateway can not null'),trigger: 'blur'}],
	dnsPrimary: [{required: true, message: this.$t('dnsPrimary can not null'),trigger: 'blur'}],
	dnsSecond: [{required: true, message: this.$t('dnsSecond can not null'),trigger: 'blur'}],
}
1
2
3
4
5
6
7

修改为：

rules:{
	ipv4:{
		ip: [{required: true, message: this.$t('ip can not null'),trigger: 'blur'}],
		netmask: [{required: true, message: this.$t('netmask can not null'),trigger: 'blur'}],
		gateway: [{required: true, message: this.$t('gateway can not null'),trigger: 'blur'}],
		dnsPrimary: [{required: true, message: this.$t('dnsPrimary can not null'),trigger: 'blur'}],
		dnsSecond: [{required: true, message: this.$t('dnsSecond can not null'),trigger: 'blur'}],
	}
}
1
2
3
4
5
6
7
8
9

保存时报错（2）

（1）问题
vue.runtime.esm.js?0261:619 [Vue warn]: Error in v-on handler: “ReferenceError: API is not defined”

（2）解决
由错误分析可知该处错误出在API处，并且这是在点击保存按钮后报的错误，因此，我们去仔细查看自己关于保存相关的包含API的函数代码的准确性

SET(){
	this.$axios.postJson(this.$urls,API,{
		session: Lockr.get(this.$constant.SESSION),
		call:{
			service: this.$constant.SYSTEM,
			method: this.$urls.SETLAN
		},
		params:{},
			}).then((res) => {
				if (res.code === 0){
					this.$notify({
					title: this.$t(constant.SUCCESS),
					message: this.$t(constant.SAVESCCESS),
					type: 'success'
					})
				}
			})
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

可以看到，这里错误是因为API前用的是,而不是.！！！这种错误不会在编译器里报错，所以会十分隐蔽！

SET(){
	this.$axios.postJson(this.$urls.API,{
		session: Lockr.get(this.$constant.SESSION),
		call:{
			service: this.$constant.SYSTEM,
			method: this.$urls.SETLAN
		},
		params:{},
			}).then((res) => {
				if (res.code === 0){
					this.$notify({
					title: this.$t(constant.SUCCESS),
					message: this.$t(constant.SAVESCCESS),
					type: 'success'
					})
				}
			})
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

保存时报错(3)

（1）错误：

（2）解决
在Network的Headers中可以查看到，此时的save请求是已经成功的，对与setLAN接口也能成功调用，那么我们所报的错误并不是在于调用函数之中

这时候再去看自己SET函数的代码：

SET(){
		this.$axios.postJson(this.$urls.API,{
			session: Lockr.get(this.$constant.SESSION),
			call:{
				service: this.$constant.SYSTEM,
				method: this.$urls.SETLAN
			},
			params:{},
		}).then((res) => {
			if (res.code === 0){
				this.$notify({
					title: this.$t(constant.SUCCESS),
					message: this.$t(constant.SAVESCCESS),
					type: 'success'
				})
			}
		})
	},
	save(form){
		if (this.validateForm(form)) {
			this.SET(this.$constant.SYSTEM,this.$urls.SETLAN,this.form)
		}
	},
	validateForm(form){
		let count = 0;
		this.$refs[form].validate((valid) => {
			if (!valid) {
				count++;
			}
		});
		return count === 0;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

出问题最大的可能就在于notify这个地方

if (res.code === 0){
	this.$notify({
		title: this.$t('success'),
		message: this.$t('save success'),
		type: 'success'
	})
}
1
2
3
4
5
6
7