vue遇到的问题总结

最新推荐文章于 2022-09-30 14:53:17 发布

转载最新推荐文章于 2022-09-30 14:53:17 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c335d4b51882525c948ac24

文章标签：

#javascript #ViewUI

1 . 不可以直接更改父组件传进来的属性值

场景：

父组件：<vcheckbox :data="checkData" v-model="checkValue"/>
子组件：
<template>
<div>
	<span v-for="item in data" style="margin:0 30px">
		<input 
		:value="item.value" 
		:id="'id'+item.value"
		type="checkbox" 
		v-model="value" />   //直接使用props.value
		<label for="'id'+item.value">{{item.label}}</label>
	</span>
</div>
</template>
<script>
	export default{
		props:{
			value:{
				type: Array,
				defalut: ()=>[],
				required:false
			},
			data:{
				type:Array,
				defalut(){
					return [
						{
							value:0,
							label:'label0'
						}
					]
				},
				required:true
			}
		},
		data(){
			return {
				
			}
		},
		methods:{

		},
		watch:{
			value(v,oldv){
				this.$emit('input',v)
			}
		}
	}
</script>
<style scoped>
	
</style>
复制代码

报错：

当选择多选框更改value值时报错

computed property 'value' was assigned to but it has no setter

分析：

value属性，如果没有设置 setter,也就是传入的是一个函数，或者传入的对象里没有 set 属性，当你尝试直接该改变这个这个计算属性的值，都会报这个错误。

解决：

子组件：
<template>
<div>
	<span v-for="item in data" style="margin:0 30px">
		<input 
		:value="item.value" 
		:id="'id'+item.value"
		type="checkbox" 
		v-model="vValue" />   //更改2
		<label for="'id'+item.value">{{item.label}}</label>
	</span>
</div>
</template>
<script>
	export default{
		props:{
			value:{
				type: Array,
				defalut: ()=>[],
				required:false
			},
			data:{
				type:Array,
				defalut(){
					return [
						{
							value:0,
							label:'label0'
						}
					]
				},
				required:true
			}
		},
		data(){
			return {
				vValue: this.value  //更改1
			}
		},
		methods:{

		},
		watch:{
			vValue(v,oldv){ //更改3
				this.$emit('input',v)
			}
		}
	}
</script>
复制代码