As a beginner in VueJs, my goal is to develop a basic application that fetches text from a Wikipedia page and displays it upon clicking a button.
Code
<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>
Errors
[Vue warn]: Property "sum" was accessed during render but is not defined on instance. at <Main>
and
[Vue warn]: data() should return an object. at <Main>
However, all console.log statements function correctly when the button is clicked