Kentico 内容和视图 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>

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 or reactive for it to be reactive. Also, you could use the Composition API's 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() return events 或 kontent，因为它们没有在模板中的任何地方使用。我看到您试图在 data() 中引用 kontent，但 eventList 和 eventList2 也未使用。您显示的模板可以完全依赖 setup() 和上面显示的解决方案。

Kentico 内容和视图 3

Kentico Kontent and Vue 3

vue.js

vuejs3

kentico-kontent