尝试设置 Vuejs 输入计算属性的值答案

【问题标题】：Trying to set the value of a Vuejs input computed property尝试设置 Vuejs 输入计算属性的值
【发布时间】：2016-03-25 15:58:30
【问题描述】：

我有一个表单，其字段使用 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 值。

【问题讨论】：

标签： javascript vue.js

【解决方案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;
                   }
       }
    }
});

【讨论】：