解决Computed property “name“ was assigned to but it has no setter.问题
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Mar
·
前几天有个朋友问我这样的一个问题
解释一下这个警告,这个警告说“计算属性“name”已经分配,但是没有setter”,其实这个警告想告诉开发者你不能直接去修改computed定义好的值,只能通过computed里面的setter方法去修改定义该计算属性,
如何解决呢?看一下下面的例子
<template>
<div class="main">
<input type="text" v-model="name" />
<div class="button" @click="changename">
<el-button type="primary" size="small">点击修改vuex中的name</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dates: "s",
};
},
computed: {
name() {
return 123;
},
},
methods: {
changename() {
this.name = "222";
},
},
};
</script>
<style>
.main {
padding: 60px;
box-sizing: border-box;
}
.button {
margin: 20px;
}
</style>
如果点击上面的按钮或在输入框修改值就会有Computed property “name“ was assigned to but it has no setter警告出现,因为点击了按钮或在输入框修改就会去修改name的值,
computed: {
name() {
return 123;
},
},
上面name的定义就是默认只是get方法(只读),如果这时候在其他事件中改变计算属性上的name的值,就一定会出现警告,那怎么解决呢?vue官网有说明
getter 只是取计算属性的name的值,setter是给计算属性的name赋值,那么只需要像下面那样改就行了
computed: {
name: {
get() {
return 123;
},
set(newValue) {
return newValue;
},
},
},
那么这个警告就会没有了!
更多推荐
所有评论(0)