前几天有个朋友问我这样的一个问题
在这里插入图片描述
解释一下这个警告,这个警告说“计算属性“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;
      },
    },
  },

那么这个警告就会没有了!

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐