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

Question

我有一個使用v-model方法綁定到VueJ的字段的表單。 當用戶從下拉列表中選擇項目時，將從$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;
                   }
       }
    }
});