Property or method “close” is not defined on the instance but referenced during render. Make sure that this property is reactive

0
votes

I am new to Vue.js, I get a 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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

   ---> <App> at src/App.vue
       <Root>

which I do not fully understand, but I know it is coming from the close method I passed to my button.

My code is as follows:

    <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>

 Please, what causes this warning?
1
javascriptvue.jsvuejs2

1 Answers

1
votes

success and close functions should be placed inside the methods field in order to be recognized by the template as methods :

 export default {
      name: "app",
      components: {
        OkoButton
      },
  methods:{  
    success: function() {
       window.console.log("oko success");
      },
      close: function() {
        window.console.log("oko closed");
      }
    }
    };