Upon my initial foray into Vue.js, I encountered a perplexing warning:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "success" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at src/App.vue
<Root>
Although I must admit it's a bit puzzling, I traced this warning back to the close method I applied to my button.
Here's a snippet of my code:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<OkoButton text="Open Oko" token="ccccc" env="sandbox" clientName="anonymous" oko_key='key' callback_url='www.google.com'
:close="close" :success="success"
:user = "{fullname: 'USER_FULL_NAME', email: 'USER_EMAIL', bvn: 'USER_BVN'}"
products = "['auth', 'transactions', 'balance', 'income', 'identity']" />
</div>
</template>
<script>
import OkoButton from "./components/OkoButton.vue";
export default {
name: "app",
components: {
OkoButton
},
success: function() {
window.console.log("oko success");
},
close: function() {
window.console.log("oko closed");
}
};
</script>
What could be causing this warning, you might ask?