我有一个用户数据对象,其中包含name
和personal income property
。
credit score
computed property
的Javascript
var app = new Vue({
el:'#content',
data:{
filledResponse:{
"name":"",
"personalIncome":"",
"spouseIncome":""
},
users:[
{
"name": "Joe Doe",
"personalIncome":"3400",
"spouseIncome":"1200"
},
{
"name": "Chris Bimpong",
"personalIncome":"32400",
"spouseIncome":"12200"
}
],
item: {"name":"What is that"}
},
methods:{
submitForm(){
const filledResponse = {
"name":"",
"personalIncome":"",
"spouseIncome":""
}
let requestData ={
"fullname": "",
"score":""
}
this.prepRequestData(filledResponse, requestData, this.makeApiCall)
},
prepRequestData(requestData, callback){
requestData["fullName"] = this.filledResponse.name;
requestData["score"]= scored;
}
},
computed:{
scored: function(){
result = parseInt(this.filledResponse["personalIncome"])/parseInt(this.filledResponse["spouseIncome"]**1.2);
return Math.round(result).toFixed(2);
}
}
}
}
);
HTML
<script src="https://unpkg.com/vue"></script>
<div id="content">
<ol>
<li v-for="user in users">
{{user.name }}
</li>
</ol>
<form v-on:submit.prevent="submitForm">
<div v-for = "user in users">
<label> Name: </label><input type="text" v-model="filledResponse["name"]"><br/>
<label> Personal Income: </label><input type="text" v-model="filledResponse["personalIncome"]"><br/><hr>
<label> Spouse Income: </label><input type="text" v-model="filledResponse["spouseIncome"]"><br/><hr>
<!-- <h3>{{scored}}</h3> -->
</div>
<input type="submit" class="btn btn-default" name="">
</form>
</div>