Kentico和Vue 3

Question

我正在寻找一个关于如何在Vue 3中使用Kontent中的数据创建组件的简单示例。更具体地说，我正在尝试列出特定内容类型的项目。我试图重构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:根据eyeslandic的提示，我试图改进我的代码，但我又被卡住了。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才能成为响应式的。此外，还可以使用组合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()。