javascript - 如何在Vue Atlas中以表格形式显示数据

Question

我需要以表格格式显示用户数据，并在每一行中都有一个批准按钮。该批准按钮应调用行更新函数。我的代码没有按预期工作，我不知道为什么。

我的代码:

             <template>
            <div>
              <va-card  >
                <h3>Users waiting for Approval </h3>
              </va-card>
            </div>  
            </template>

            <script>
            import axios from 'axios';

            export default{
                data: function{
                    return{
                        userData:'',
                    }
                },
                mounted(){
                    var self = this;

                    axios.get('') //api call
                    .then(function(res){
                        self.userData = res.data;

                              console.log("userdata",self.userdata)
                    }
                }
             }

API数据输出:

        [
          {
            "email": "asa", 
            "phone": "121212121", 
            "time": "2019-09-03T09:52:04.062486302Z", 
            "username": "as"
          }, 
          {
            "email": "asa@adsa", 
            "phone": "1231231312", 
            "time": "2019-09-03T09:52:22.296617365Z", 
            "username": "asa"
          }, 
          {
            "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aadecfd9deeacdc7cbc3c684c9c5c7" rel="noreferrer noopener nofollow">[email protected]</a>", 
            "phone": "1342132141414", 
            "time": "2019-09-03T09:52:47.201341563Z", 
            "username": "test"
          }
        ]

Answer 1

由于您使用的是 vue-atlas 库，您可以这样做:

<va-table :hover="hover" :size="size" v-if="userData.length">
  <table>
    <thead>
      <tr>
        <th>email</th>
        <th>phone</th>
        <th>time</th>
        <th>username</th>
      </tr>
    </thead>
    </tbody>
    <tr v-for="user in userData">
        <td v-for="v in user">{{v}}</td>
        <td><va-button type="danger"><va-icon type="trash" /></va-button></td>
     </tr>
    </tbody>
  </table>
</va-table>

您的数据对象:

 data () {
    return {
      hover: true,
      size: 'lg',
      userData :[]
    }
  }