Kentico Kontent and Vue 3

Question

我正在寻找一个关于如何使用Kontent中的数据在Vue 3中创建组件的简单示例。更具体地说，我正在尝试列出特定内容类型的项目。我试图重构Kentico提供的Vue示例应用程序，但我对编程和Vue还很陌生，似乎无法理解。。。

以下代码给出一个错误，称为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>

第二版：根据eyslandic的提示，我试图改进我的代码，但我又被卡住了。setup()内部的变量在它之外是不可访问的，那么我如何获得data()的结果呢？

这就是我现在拥有的：

<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>

Answer 1

events需要是ref或reactive才能是反应性的。此外，还可以使用Composition API的computed从setup():创建计算属性

<template>
<p v-for="(name, index) in eventList" :key="index">
{{ name }}
</p>
</template>
<script>
import { computed, reactive } from 'vue'
export default {
setup() {
const events = ref([])

Client.items()
.type('event')
.toObservable()
.subscribe(response => events.value = response.items)
return {
eventList: computed(() => events.value.map(event => ({ name: event.name.value }))
}
}
}
</script>

不需要从setup()返回events或kontent，因为它们在模板中的任何位置都不使用。我看到你试图在data()中引用kontent，但eventList和eventList2也未使用。您所展示的模板可以完全依赖于setup()和上面所展示的解决方案。