zoukankan      html  css  js  c++  java
  • vue报类似警告Computed property "isLoading" was assigned to but it has no setter

    一、原因:一个计算属性,当计算传入的是一个函数,或者传入的是一个对象,而没有设置 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"

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

     

  • 相关阅读:
    【vue坑】vue组件不显示,没加载dom
    vue radio绑定数据
    git修改密码遇到的坑 git -- Authentication failed for
    python全局变量
    adb无法使用,提示error: unknown host service的解决办法
    uiautomator2 init初始化失败
    【解决方案】安装lxml失败 Installing lxml
    【一般都是源的问题】ubuntu使用apt-get update更新失败
    ubuntu 安装python3.6 以及安装pip3 出现Command '('lsb_release', '-a')' returned non-zero exit status 1问题解决
    ubuntu设置python软链python3.5和python3.6同时存在,python3指令使用python3.6
  • 原文地址:https://www.cnblogs.com/ahao68/p/8874877.html
Copyright © 2011-2022 走看看