SharePoint Saturday Charlotte 8/10/19
I had the opportunity to lead a SharePoint session today at SP Saturday Charlotte. The topic was using VUE.js with SharePoint. I promised that I would provide the code and the codepen I Shared.
Codepen: https://codepen.io/isogunro/pen/aeRNZL
The help desk code on Gist can be found at this blog post from a previous SP Saturday I did.
<head>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" />
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-expansion-panel inset focusable>
<v-expansion-panel-content lazy
v-for="(item,i) in expansion"
:key="i"
>
<template v-slot:header>
<div>{{item.Title}}</div>
</template>
<v-card>
<v-card-text>{{item.Details}}</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-app>
</div>
<script type="text/javascript" src="/sites/demos/mdemos/webpart/expansion/expansionPanel.js"></script>new Vue({
el:"#app",
data: {
expansion: []
},
created: function(){
this.getListData();
},
methods: {
getListData: function(){
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items";
var vm = this;
axios.get(endPointUrl).then(function(response){
vm.expansion = response.data.value;
})
.catch(function(error){
console.log(error);
})
.then(function(){
console.log("Always executes")
})
}
}
})
Optimal Training Group 