0

I am new to vue and I want to use in SharePoint to render a table from my list data. I've got the code working to the point of getting data from rest api using jquery ajax. I am stuck on how to render the list data into a table.

The columns in my list are "Email","First Name", "Last Name", and "Phone". This is my very first time trying to use vuejs in SharePoint so I'm really not sure how to proceed once I've gotten my data. Any help would be appreciated. Below is my code:

</head>

<body>
<div id="app">
{{ fieldNames }}
{{ status }}
</div>

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
  <script>
    new Vue({
    el: "#app",
    data: {
        fieldNames: "HELLO SharePoint 2013",
        status: '',
        columnNames: ["Email","First Name", "Last Name", "Phone"],
        columnData: []
    },
    created: function(){
        this.getListData();
    },
    methods: {
        getListData: function(){
         var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('siteAdmins')/items";
        var headers = { 
            "accept": "application/json;odata=verbose" 
        };
            this.status = "getting data...";
            var vm = this;
            jQuery.ajax({ 
                url: endPointUrl, 
                type: "GET", 
                headers: headers, 
                success: function (data) {
                console.log(data);
                    vm.generateData(data);
                }
            })
        },
        generateData: function(d){
         alert("generateData"); //<-- This works but not sure what to do next 
        }
    }
});

1

My test sample for your reference: enter image description here

<style type="text/css">
        table {
            font-family: 'Open Sans', sans-serif;
            width: 750px;
            border-collapse: collapse;
            border: 3px solid #44475C;
            margin: 10px 10px 0 10px;
        }

            table th {
                text-transform: uppercase;
                text-align: left;
                background: #44475C;
                color: #FFF;
                padding: 8px;
                min-width: 30px;
            }

            table td {
                text-align: left;
                padding: 8px;
                border-right: 2px solid #7D82A8;
            }

                table td:last-child {
                    border-right: none;
                }

            table tbody tr:nth-child(2n) td {
                background: #D4D8F9;
            }
    </style>
    <table id="admins">
        <thead>
            <tr>
                <th>Email</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in rows">
                <td>{{row.Email}}</td>
                <td>{{row.FirstName}}</td>
                <td>{{row.LastName}}</td>
                <td>{{row.Phone}}</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
    <script type="text/javascript">
        $(function () {
            var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('siteAdmins')/items";
            var headers = {
                "accept": "application/json;odata=verbose"
            };
            jQuery.ajax({
                url: endPointUrl,
                type: "GET",
                headers: headers,
                success: function (data) {
                    var _Rows = data.d.results.map(function (a) {
                        var rObj = {};
                        rObj["Email"] = a.Email;
                        rObj["FirstName"] = a.FirstName;
                        rObj["LastName"] = a.LastName;
                        rObj["Phone"] = a.Phone;
                        return rObj;
                    });

                    new Vue({
                        el: '#admins',
                        data: {
                            rows: _Rows
                        }
                    });
                }
            })
        })

    </script>
1

You could make use of Vue-tables-2 to display data in tabular format. please refer below article for more details

https://www.npmjs.com/package/vue-tables-2

https://vuejsexamples.com/a-simple-and-pretty-table-component/

more examples of Vue Table implementation: https://vuejsexamples.com/tag/table/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.