VUE.js将数据从数据传递到html表单到方法

时间:2017-04-23 14:08:40

标签: javascript vue.js

我有一个用户数据对象,其中包含namepersonal income property

  1. 我想使用credit score
  2. 计算用户computed property
  3. 通过表单添加结果。
  4. 拨打API端点。 我无法将计算属性中的用户数据导入到我的HTML中 我无法从计算属性中获取数据。
  5. 的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>
    

    Run Fiddle

0 个答案:

没有答案