I'm searching for a simple example on how to create a component in Vue 3 using data out of Kontent. More specifically, I'm trying to list items of a certain content type. I tried to refactor the Vue sample app that Kentico provided, but I'm quite new to programming and Vue and I can't seem to figure it out...
The following code gives an error saying Cannot read property 'name' of undefined
:
<template v-for="(item, index) in eventsData" :key="index">
<p>{{ item.name }}</p>
</template>
<script>
import { Client } from "../Client"; //seperated this, the connection works
export default {
name: 'Test',
setup() {
const data = Client
.items()
.type("event")
.toObservable()
.subscribe(response => {
console.log(response) //this works, data is displayed in the console
return response.items;
});
return {data};
},
computed: {
eventsData: function() {
return this.data.map(event => ({
name: event.name
}));
}
},
}
</script>
Edit2: Based on eyeslandic's hint I tried to improve my code, but I'm stuck again. The variables inside setup()
are not accessable outside of it, so how do I get the outcome to data()
?
This is what I have now:
<template>
<div class="test-div">
<template v-for="(item, index) in eventsData" :key="index">
<p>{{item.name}}</p>
</template>
</div>
</template>
<script>
import { Client } from "../Client";
export default {
name: 'Test',
setup() {
let events = [];
const kontent = Client
.items()
.type("event")
.toObservable()
.subscribe(response => {
console.log(response);//this works
events = response.items;
console.log("events inside kontent variable: " + events)//[object object][object object]
});
console.log("events outside kontent variable: " + events);//nothing
console.log("kontent inside setup: " + kontent)//[object object]
return {
events,
kontent
};
},
data() {
return {
eventList: events, //error: undefined,
eventList2: kontent //error: undefined
}
},
computed: {
eventsData: function() {
return this.eventList.map(event => ({
name: event.name.value
}));
}
}
}
</script>
events
needs to be aref
orreactive
for it to be reactive. Also, you could use the Composition API'scomputed
to create a computed property fromsetup()
:There's no need to return
events
orkontent
fromsetup()
, since they're not used anywhere in the template. I see your attempt at referencingkontent
indata()
, buteventList
andeventList2
are also unused. The template you've shown could rely exclusively onsetup()
with the solution shown above.