Vue js, данные прохода не принимаются

У меня есть простой депозит. Вот код.Vue js, данные прохода не принимаются

app.js:

el: '#calcbox', 

data: { 

    newCalc: { 
     summ: '50000', 
     currency: 'USD', 
     duration: '', 
     percents: '', 

    }, 

    calcResult: '', 

}, 

computed: { 

    percents() { 

     var id = $("#deposit_id").val(); 
     var url = "/get_percent/"+ id + '/' + this.newCalc.currency + '/' + this.newCalc.duration; 

     this.$http.get(url, function(response){ 
     return this.newCalc.percents = response; 
     }); 

    }, 

    calcResult() { 

     var deposit_id = $("#deposit_id").val(); 
     var url = "/api/calc/"+ deposit_id + '/' + this.newCalc.summ + '/' + this.newCalc.currency + '/' + this.newCalc.duration; 

     this.$http.get(url, function(response){ 
     return this.calcResult = response; 

     }); 

    } 

},

во внешнем интерфейсе:

<span>@{{newCalc.percents}}%:</span> 

<span>@{{calcResult}}:</span>

Таким образом, проблема заключается в том, что результат не появляется в веб-интерфейсе, console.log показывает правильный результат.

Процентная ценность показывает хорошо.

источник

2015-12-24 Mistiqe

Не выставляйте метод calcResult * вычисляемый *, если у вас есть переменная данных calcResult. Переименуйте одно из них на что-то другое. – Hkan

То же самое с 'newCalc.percents'. Просто сделайте их вычисляемыми свойствами и не включите их в переменную данных. Кроме того, лучше всего использовать 'data' функцию, которая возвращает объект данных, а не только объект – Jeff

Я не могу понять, почему проценты хороши, но результат - emty впереди. Я удалил переменную data данных calcResult. – Mistiqe

calcResult() { 

    var deposit_id = $("#deposit_id").val(); 
    var url = "/api/calc/"+ deposit_id + '/' + this.newCalc.summ + '/' + this.newCalc.currency + '/' + this.newCalc.duration; 

    this.$http.get(url, function(response){ 
     return this.calcResult = response; 
    }); 

}

добавить .bind (этот)

calcResult() { 

    var deposit_id = $("#deposit_id").val(); 
    var url = "/api/calc/"+ deposit_id + '/' + this.newCalc.summ + '/' + this.newCalc.currency + '/' + this.newCalc.duration; 

    this.$http.get(url, function(response){ 
     return this.calcResult = response; 

    }.bind(this)); 

}

Или использовать жирную стрелку обозначения, так как вы используете синтаксис ES6

calcResult() { 

    var deposit_id = $("#deposit_id").val(); 
    var url = "/api/calc/"+ deposit_id + '/' + this.newCalc.summ + '/' + this.newCalc.currency + '/' + this.newCalc.duration; 

    this.$http.get(url, response => { 
    return this.calcResult = response; 

    }); 

}

this в .then обратного вызова не совпадает с контекстом как вне или внутри вашего метода vue

источник

2016-08-23 10:18:01

Vue js, данные прохода не принимаются

ответ

Смежные вопросы