Trying to set data from a method involves using fetch to retrieve REST data. However, attempting to set the data with this.item = 'test' does not seem to work. The issue arises when trying to access this.item inside ".then" as it doesn't work properly. Strangely, it works fine outside of the ".then" block. It's crucial to use the REST call to fetch the necessary data.
Vue.component('internal_menu', {
props: ['list'],
data: function () {
return {
item: '1'
}
},
methods: {
teste(event)
{
event.preventDefault();
var payload = {
method: 'GET',
headers: { "Accept": "application/json; odata=verbose" },
credentials: 'same-origin' // or credentials: 'include'
}
const url = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+ this.list +"')/Items?$select=Title,Id,Link,Icone&$orderby=Title%20asc";
fetch(url,payload)
.then((resp) => resp.json())
.then(function(data)
{
let items = data.d.results;
this.item = 'teste';// this won't work here
})
.catch(function(error) {
console.log(JSON.stringify(error));
});
this.item = 'tst123'; //this will work here
},
},
template: `
<div id='tst'>
<h3>{{list}} - {{item}}</h3>
<button v-on:click="teste">Try Me</button>
</div>
`,
mounted: function () {
this.getMenuData();
}
})
new Vue({
el: "#app"
})
Thank you, Everton