项目报错逻辑错误

项目某个位置报错以及逻辑错误,如何查找以及如何更改,快速定位

页面中的某个方法出现了错误,或者因为自己的一些操作导致代码出现的错误

例如下面这个方法:

<template>
	<view>
		<view>刚刚输入的值是:{{text}}</view>
		<input type="text" v-model="reac" placeholder="请输入内容">
		<button @click="add()">点我输入框的值会传到上面</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reac:'',
				text:''
			}
		},
		onLoad() {

		},
		methods: {
		
		}
	}
</script>

<style>

</style>

在页面运行点击会报错

这个错误就很明显,我们定义了一个点击事件方法,但是页面上面没有这个方法,vue找不到,所以才会报错

<script>
	export default {
		data() {
			return {
				reac:0
			}
		},
		onLoad() {

		},
		methods: {
				add(){
				//获取输入框的值
				const input_value = this.reac
				//将数据打印到控制台查看获取的内容是否有误
				console.log(input_value)
			}
		}
	}
</script>

将方法写在methods里面,当前页面调用方法可以直接this.方法名例如this.add ,这样就可以调用这个方法了,this关键字,代表自己

获取正确之后接下来接着写add方法的逻辑

	add(){
				//获取输入框的值
				const input_value = this.reac
				//获取接收的值
				const text_value = this.text
				text_value = input_value
			}

运行之后浏览器又报错

read-only 只读 text_value的值只能被读取不能被修改
注意 const定义的是常量,也就是这个定义的input_value,是只读的,不可被修改 可以重新赋值

将定义text_value的函数改成let就可以了

let text_value = this.text

运行之后不报错,但是还是不会显示 这个原因是因为我们只是修改了定义this.text的变量,而return里面的text并未被修改。

//这个是笨方法
	add(){
				//获取输入框的值
				const input_value = this.reac
				let text_value = this.text
				text_value = input_value
				this.text = text_value
			}
			//最简单最直接
	add(){
				//获取输入框的值
				const input_value = this.reac
				this.text = input_value 
			}

这个做的并不完美,可以加一点自己想法,比如在输入框不能输入为空的数据,还可以限制字符长度。可以自己动手试着写写