嘗試設置Vuejs輸入計算屬性的值

Question

我有一個窗體，其中的域使用v-model方法綁定到VueJs。當用戶從下拉列表中選擇一個項目時，字段將從$http響應填充。

HTML：

<form id="vApp"> 
    <input type="number" v-model="hourlyRate"> 
</form> 

的JavaScript：

var thing = new Vue({ 
    el: '#vApp', 
    data: { 
     response: {} 
    }, 
    computed: { 
     hourlyRate: function(){ 
      return this.response.length > 0 ? 0 : this.response.hourlyRate;      
     } 
    }, 
    methods: { 
     getHourlyRate: function(){ 
      this.$http.post('someUrl', {iWant: 'hourlyRate'}, 
        function(response){ 
         this$set('response', response); 
        } 
     } 
    } 
}); 

因此，用戶獲得了基於其下拉菜單中輸入了「罐頭」的選項，但我也希望他們能夠進入一個值並且該值將成爲對象的值hourlyRate。

Answer 1

您不能修改像這樣的計算屬性。只需創建hourlyRate屬性並在收到回覆時將其設置爲：

var thing = new Vue({ 
    el: '#vApp', 
    data: { 
     hourlyRate: 0 
    }, 
    methods: { 
     getHourlyRate: function(){ 
      this.$http.post('someUrl', {iWant: 'hourlyRate'}, 
        function(response){ 
         this.hourlyRate = response.length > 0 ? 0 : response.hourlyRate; 
        } 
     } 
    } 
});