问题描述
我正在寻找一个关于如何使用来自 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>
Edit2:根据 eyelandic 的提示,我试图改进我的代码,但我又被卡住了。 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>
解决方法
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>
无需从 events
返回 kontent
或 setup()
,因为它们没有在模板中的任何地方使用。我看到您尝试在 kontent
中引用 data()
,但 eventList
和 eventList2
也未使用。您展示的模板可以完全依赖于 setup()
以及上面显示的解决方案。