试图设置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;
                   }
       }
    }
});