Kentico Kontent 和 Vue 3答案

【问题标题】：Kentico Kontent and Vue 3Kentico Kontent 和 Vue 3
【发布时间】：2021-03-30 00:00:09
【问题描述】：

我正在寻找一个关于如何使用来自 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>

【问题讨论】：

标签： vue.js vuejs3 kentico-kontent

【解决方案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() 和上面显示的解决方案。

【讨论】：