Encountering the error message
TypeError: Cannot set property 'randomWord' of undefinedthis.randomWord = response.data.word;Confirming that console.log(response.data.word) does display a string.
Vue Component Structure:
<template>
<div>
<h2>Wordnik Random Word</h2>
<button class="button" @click="getWord">Random Word</button>
<p>The randomly generated word is: {{ randomWord }}</p>
</div>
</template>
<script>
const axios = require('axios')
export default {
name: 'RandomWord',
data() {
return {
randomWord: '',
}
},
methods: {
getWord() {
axios.get('https://api.wordnik.com/v4/words.json/randomWord', {
params: {
api_key: 'XXXXXXXXXX',
hasDictionaryDef: true,
minCorpusCount: 4
}
})
.then(function (response) {
console.log(response.data.word);
this.randomWord = response.data.word;
})
.catch(function(error) {
console.log(error);
});
},
},
}
</script>