vue报类似警告Computed property "isLoading" was assigned to but it has no setter

一、原因:一个计算属性,当计算传入的是一个函数,或者传入的是一个对象,而没有设置 setter,也就是 set 属性,当你尝试直接该改变这个这个计算属性的值,

一、原因:一个计算属性,当计算传入的是一个函数,或者传入的是一个对象,而没有设置 setter,也就是 set 属性,当你尝试直接该改变这个这个计算属性的值,都会报这个警告,vuex还会出现通过commit提交修改vuex值的警告的情况。

参考文档:

二、常见导致该错误的写法

(1)计算属性中传入的是对象和方法,直接对计算属性进行赋值会导致错误

比如:

<template>
   <div>
       <input v-model='change'/>
    </div>
</template>

<script>
export default {
  data () {
      return {
         a: ''
      }
   },
  computed: {
     change () {
        return this.a
    }
  }
}
</script>

 

结合vuex比如:

<template>
   <div>
       <input v-model='change'/>
    </div>
</template>

<script>
export default {
  data () {
      return {
      }
   },
  computed: {
     change () {
        return this.$store.state.val
    }
  }
}
</script>
<template>
   <div>
       <input v-model='change'/>
    </div>
</template>

<script>
export default {
  data () {
      return {
         a: ''
      }
   },
  computed: {
     ...mapState({
      // 获取vuex中某个对象的属性值给页面展示用,页面双向绑定也会更新计算属性
      change: state => state.object.change
    })
  }
}
</script>
<template>
   <div>
       <div @click='change()'>点我</div>
    </div>
</template>

<script>
export default {
  data () {
      return {
  
      }
   },
  computed: {
     ...mapState({
      // 获取vuex中某个对象的属性值给页面展示用
      change: state => state.object.change
    })
  },
  method: {
     change () {
        this.change = '赋值'
     }
  }
}
</script>

三、解决方法

(1)将计算属性转成一个对象,使用getter与setter

   <div>
       <input v-model='change'/>
    </div>
</template>

<script>
export default {
  data () {
      return {
         a: ''
      }
   },
  computed: {
     //change () {
       // return this.a
    //}

       change :{

         // getter   将值赋给change
         get: function () {
                return  this.a
          },
         // setter  获取改变后的值并设置给a
         set: function (newValue) {
                this.a = newValue;
          }
      }
  }
}
</script>

(2)vuex获取所需对象而不是具体的属性值,后面进行赋值的操作也会更改vuex中的值(对象按值传递)

<template>
   <div>
<!--双向绑定会改变vuex中change的值,官方建议通过commit的方式改变vuex值-->
<input v-model='object.change'> <div @click='change()'>点我</div> </div> </template> <script> export default { data () { return { } }, computed: { ...mapState({ // 获取vuex中某个对象的属性值给页面展示用 //change: state => state.object.change object: state => state.object }) }, method: { change () { this.object.change = '赋值' // 同步修改了vuex值 this.change = this.object.change } } } </script>

 扩展:

一、vue报错Error in mounted hook: "TypeError: handlers[i].call is not a function"

原因:钩子函数书写错误或者钩子函数中使用了未定义的方法

 

 

标签: 的是 也会 还会