SharePoint List Rendering with VUE.JS Ajax call

When we using in client side developing is not matter what version of SharePoint it will work in all version of SharePoint.

Steps:

1.       Create SP list with Name "Test"

2.       Add some data to list

3.       For the example I have only title column

 

Now after creating the list we will write some code

1.       Create a folder in your workspace with name ex "vue-demo-sp-list"

2.       Inside the folder create a html file "index.html"

3.       Open the file with editor (vs-code,notpad++)

4.       Copy the code below

 

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">

                <table class="table">

                                <thead>

                                                <tr>

                                                                <th>Title</th>

                                                </tr>

                                </thead>

                                <tbody>

                                                <tr v-for="item in items">

                                                                <td>{{item.title}}

                                                                </td>

                                                </tr>

                                </tbody>

                </table>

</div>

 

<script>

const app = new Vue({

    el: '#app',

                data() {

                                return {

                                                items:[]

                                                }

                                },

                created: function () {

                                    this.getTestList();                                       

                                },

                methods: {

                                getTestList:function() {

                                 

                                  var that = this;

 

            var endPointUrl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbyTitle('Test')/items";

            var headers = {

                "accept": "application/json;odata=verbose"

            };

            $.ajax({

                url: endPointUrl,

                type: "GET",

                headers: headers,

                success: function (data, status, xhr) {

                    that.items = data.d.results;

                    //alert('Success');

                },

                error: function (xhr, status, error) {

 

                   console.log("error",xhr);

 

                }

            });

        },

                                }

                });

</script>

 

5.       upload to sharepoint assets folder create folder for the project

6.       add content editor webpart in some page and put the link to the file "index.html""

DEMO

Title
{{item.title}}