javascript - 尝试设置 Vuejs 输入计算属性的值

Question

我有一个表单，其中的字段使用 v-model 方法绑定(bind)到 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;
                   }
       }
    }
});