关于Computed property “username“ was assigned to but it has no setter.报错解决方法

先看代码:

<template>
<div>
  <h4>计算属性完整写法</h4>
  <input type="text" v-model="username">
</div>
</template>

<script>

export default {
  computed:{
    username(){
      return '刘德华'
    }
  }
}
</script>

<style>

</style>

 什么原因呢:

首先这个报错的前提是你在计算属性computed中获取了name,但是你又在页面其他地方直接修改name的值就会报这个错

 解决方法  :

<template>
<div>
  <h4>计算属性完整写法</h4>
  <input type="text" v-model="username">
</div>
</template>

<script>

export default {
  /***
   * 语法:
   * computed:{
      '计算属性名':{
          set(值){
        },
           get(){
            return 值
        }
      }
  }
   */
  computed:{
    username:{
      //给usename赋值触发set方法
      set(val){
        console.log(val);
      },
      //使用username的值触发get方法
      get(){
        return  '刘德华'
      }
    }
  }
}
</script>

<style>

</style>

何时使用计算属性完整写法?

       给计算属性变量赋值的时候

set函数和get函数什么执行?

       set接收要赋予的值

       get里要返回这个计算属性具体值

猜你喜欢

转载自blog.csdn.net/jewels_w/article/details/125581371