[Vue] Computed property "XXX" was assigned to but it has no setter.

項目過程當中常常遇到以下問題：

[Vue warn]: Computed property "CurrentStep" was assigned to but it has no setter. 意思是：計算屬性 CurrentStep 被賦值了，但此它並未定義 set方法 ，故出現上面錯誤提示。

vue官網中關於計算屬性的示例是這樣的:

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 僅讀取, 計算屬性的 getter
    aDouble: function () {
      return this.a * 2
    },
    // 讀取和設置, 計算屬性的 getter 和 setter
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

複製代碼

能夠看出：aDouble計算屬性默認只有get函數,僅支持讀取；而aPlus計算屬性聲明瞭get 和 set函數，支持讀取和設置。故當出現上錯誤提示時，只需按照aPlus計算屬性聲明方式修正便可解決問題。

注意：若是你爲一個計算屬性使用了箭頭函數，則 this 不會指向這個組件的實例，不過你仍然能夠將其實例做爲函數的第一個參數來訪問。：

computed: {
  aDouble: vm => vm.a * 2
}
複製代碼

不過我還有個問題：若是computed中依賴的不是data中的屬性，而是prop中的屬性，咱們又應該如何處理呢？

答案：因爲vue中prop的屬性是父組件傳遞給子組件值，咱們並不建議直接操做prop中的屬性。你能夠在data中添加一個新的映射屬性（做爲prop屬性的映射），並使用watch達成映射。

附上代碼以下：

props: ['step'],
data(){
    return {
       stepMap: null
    }
},
computed:{
    currentStep:{
        get(){
            return this.stepMap
        },
        set(v){
            this.stepMap = v
        }
    }
},
watch: {
   step(v) {
       this.stepMap = v
   }
}
複製代碼

但願能幫助你們，thanks !!!