在js中呈现来自异步函数的变量

Question

我对VueJs很陌生。我的目的是创建一个简单的应用程序，从维基百科页面中提取文本，并在按下按钮时呈现它。

代码

<script>
const wiki = require('wikipedia');
export default {
data() {
sum:"hello"
},
methods: {
async getWiki() {
try {
const page = await wiki.page('Batman');
console.log(page);
//Response of type @Page object
const summary = await page.summary();
console.log(summary.extract);
//Response of type @wikiSummary - contains the intro and the main image
this.sum = summary.extract
} catch (error) {
console.log(error);
//=> Typeof wikiError
}
}
}
}

<template>
<span>{{sum}}</span>
<button @click="getWiki()">Get Wiki</button>
</template>

错误

[Vue warn]: Property "sum" was accessed during render but is not defined on instance. at <Main>

和

[Vue warn]: data() should return an object. at <Main>

但是当按下按钮时，所有的console.log都正常工作

Answer 1

尝试为数据添加返回语句

data() {
return {
sum: "hello"
}
}