前几天有个朋友问我这样的一个问题
解释一下这个警告,这个警告说“计算属性“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;
},
},
},
那么这个警告就会没有了!