前端开发：Vue报错Computed property “show“ was assigned to but it has no setter的解决方法

前言

在前端开发中，使用Vue的时候关于组件使用是非常常见的操作，而且也会遇到各式各样的问题，尤其是刚接触前端开发的开发者。本篇博文分享一下在封装关于Vue的组件的时候，通过计算属性监听父子组件传值提示警告的问题，即：Computed property "show" was assigned to but it has no setter错误。那么接下来就来介绍一下该提示警告的解决方法，记录一下，方便查阅使用。

报错提示

在运行Vue项目之后，浏览器控制台会提示一个警告提示，具体的警告提示信息如下所示：

[Vue warn]: Computed property "show" was assigned to but it has no setter.


found in

--->  at src/pro/nt/components/MaintDialog.vue

        at src/pro/nt/views/ProDils.vue

          at src/App.vue

           

 

分析

通过控制台的警告提示，可以窥探一二，提示的大概意思就是虽然分配了计算属性“show”，但是它没有setter。也就是子组件中定义的计算属性缺少setter，使用过计算属性的开发者应该都明白，该警告提示通常发生在组件内给计算属性赋值的时候如果没有显示声明的setter，就会有该报错提示；在计算属性Computed中定义属性只有一个return，而且在其他地方进行了赋值操作，就导致了这个报错警告。那么分析到这里，问题就会迎刃而解了，根据这个思路直接去排除，就能发现问题所在。

解决步骤

1、首先来看一下报错时候到写法，具体如下所示：

  computed: {

      show() {

          return this.isShow;

      }

  },

 

2、排查问题之后，找到问题所在，正确的写法如下所示：

  computed: {

     show: {

      get() {

       return this.isShow;

      },

    set() {},

     },

  },

 

3、总结

通过上面的正确写法和报错写法对比，可以很明显的看到错误原因的所在，该问题虽然简单，但是比较有代表性，解决该问题直接在声明计算属性的时候添加声明一个setter即可。但是值得注意的是，set()方法里面可以根据实际业务场景添加逻辑，如果没有使用到相关逻辑，只需定义一个空的setter方法即可。

最后

       通过上述的解决方法就可以完美解决本文的警告提示，虽然解决步骤很简单，但是还是需要了解掌握的，尤其是对于Vue还不太熟的开发者来说更为重要，更应该掌握这种问题的解决方法，这里不再赘述。

以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！

三掌柜的微信公众号：

 

三掌柜的新浪微博：