Computed property "xxxx" was assigned to but it has no setter

vue使用computed屬性計算某些值時，在頁面上使用v-model去改變計算屬性時，報錯Computed property "xxxx" was assigned to but it has no setter，翻譯成中文就是“計算屬性“xxxx”已經分配了，但它沒有setter”，理解一下，就是屬性xxxx獲取了值，但是沒有設置值的方法，報錯代碼示例貼一下：

<template>
  <div>
    <div>{{fullname}}</div>
    <input v-model="fullname"></input>
  </div>
</template>

<script>
    export default {
        data(){
          return {
            firstname:{val:'a'},
            lastname:{val:'b'}
          }
        },
      computed:{
        fullname(){
          return this.firstname.val+'.'+this.lastname.val;
        }
      }
    }
</script>

這里又需要帶一下v-model的使用原理了，v-model實現數據雙向綁定，是一個語法糖:

<input v-model="fullname"></input>

<input v-bind:value="fullname" v-on:input="fullname=$event.target.value" type="text">

上面兩行代碼實現的功能是一樣的，在頁面上修改fullname的值的同時，屬性值fullname值也會改變，

綁定input的value值，通過input方法觸發實時修改input框頁面值，然后input方法中實現修改屬性值，$event 是當前的事件對象， $event.target.value指向的是當前的input的值，從而實現了數據的雙向綁定。

所以，v-model，說白了，會觸發改變computed計算屬性的值，但是以上computed的寫法只能獲取到屬性的值，不支持設置，一般看過官網就會知道computed不僅支持讀取，還支持設置：

 此時我們的代碼需要修改為：

<template>
  <div>
    <div>不可編輯：{{fullname}}</div>
    v-model：
    <input v-model="fullname"></input>
    <br>
    綁定響應式數據、觸發input事件：
    <input v-bind:value="fullname" v-on:input="fullname=$event.target.value" type="text">
  </div>
</template>

<script>
    export default {
        data(){
          return {
            firstname:{val:'a'},
            lastname:{val:'b'}
          }
        },
      computed:{
        fullname:{
          get(){
            return this.firstname.val+'.'+this.lastname.val
          },
          set(val){
            let a = val.split('.')[0];
            let b = val.split('.')[1];
            this.firstname = {val:a};
            this.lastname = {val:b};
          }
        }
      }
    }
</script>

頁面操作input框時，同樣可以實現功能，且不會再報錯了