1

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

1 回答 1

2

events需要是 a reforreactive才能使其具有反应性。此外，您可以使用 Composition APIcomputed从以下位置创建计算属性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>

不需要 returnevents或kontentfrom setup()，因为它们没有在模板中的任何地方使用。我看到您尝试引用kontentin data()，但eventList也eventList2未使用。您显示的模板可以完全依赖于setup()上面显示的解决方案。

于 2020-12-22T21:09:30.157 回答