• 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"

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

     

  • 相关阅读:
    SVN使用指引(Windows)
    Android开发14——监听内容提供者ContentProvider的数据变化
    Android开发13——内容提供者ContentProvider的基本使用
    Android开发12——Andorid中操作数据库的insert的两种方法以及nullColumnHack
    Android开发11——手机横屏和竖屏与android:configChanges
    Android开发10——Activity的跳转与传值
    Android开发9——Activity的启动模式
    Android开发8——利用pull解析器读写XML文件
    Android开发7——android.database.CursorIndexOutOfBoundsException:Index -1 requested
    Android开发6——布局中的wrap_content和fill_parent以及match_parent
  • 原文地址:https://www.cnblogs.com/ahao68/p/8874877.html
Copyright © 2020-2023  润新知