vue常遇错误 v-mode 双向绑定问题

世间美好与你

已于 2022-05-08 19:57:13 修改

阅读量1.7k

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-05-08 19:52:54 首次发布

本文链接：https://blog.csdn.net/AKM5201314/article/details/124652860

版权

本文介绍了在Vue项目中遇到的v-model双向绑定问题，当尝试提交个人信息表单时，浏览器控制台出现报错。错误信息表明属性或方法`abs`未在实例上定义。问题的根源在于vue的v-model需要与data中的属性对应，但当前代码中未定义`abs`。解决方案是在`data`选项中添加`abs`属性。遵循这个修复方法，开发者应养成在开发过程中检查控制台错误信息的习惯，以便及时解决问题。

摘要由CSDN通过智能技术生成

项目场景：

在我们实际开发的过程中,程序有bug是经常有的事情：

例如：vue 中 v-model的双向绑定问题

问题描述

例如：写好的个人信息表单提交页面,虽说输入框可以输出文本,但是浏览器调试模式下的console里面会有报错的提示
示例:

<template>
	<view>
		<input v-model="abs" />
	</view>
</template>

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

		},
		methods: {

		}
	}
</script>

<style>

</style>

浏览器运行之后,控制台会报错
请添加图片描述

原因分析：

这个错误翻译过来就是: 区块供应商。js:2128[Vue warn]：属性或方法“abs”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。发现于 pages/index/index.vue
这个错误信息已经告诉我们了,属性或方法 abs未在实例上被定义,也就是说页面index.vue没有定义abs这个方法或者属性,所以会报这个错误

vue的v-model是一个双向绑定的数据流，何为双向绑定,顾名思义,就是需要有一个属性,然后通过v-mode进行数据绑定,就拿上面的abs来说,abs的值是123,那么被v-model绑定的标签的值也会变成123,他会随着abs的值变化而变化。

解决方案：

只需在script里面的return里面加一个属性即可

<script>
	export default {
		data() {
			return {
				abs:""  //如有多个属性需要用 , 隔开
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

再次运行浏览器就不会报错了

tips: 在开发的过程中,一定要打开浏览器调试模式,看控制台有无报错信息,优先解决报红的错误