Override VueJS component methods from another component

Question

I've tried to override VueJS component method from another component.

Here I want to override checkForm method from another VueJS file.

inside ./src/components/auth_form.vue:

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  props: {...},
  methods: {
    checkForm: function(e: any) {
      console.log('Please override this method!')
    }
  }
})
</script>

I want to override this method from ./src/views/signup.vue:

<script lang="ts">
import Vue from 'vue'
import authForm from '../components/auth_form.vue'

export default Vue.extend({
  name: 'signup',
  components: {
    authForm
  },
  data: function() {...}, 
  methods: {
    // This does not override the method above!
    checkForm: function(e: any) {
      console.log("success")
      // Reset the form
      this.signupForm = {} as SignupForm
    }
  }
})
</script>

Jake Lam · Accepted Answer · 2020-05-19 02:16:28Z

2

Yes they will not override because the 2 functions are in 2 different scopes. They can have same name and works independently. In order to do what you want, you have to put the checkForm function of auth_form inside its props.

So in auth_form:

props: {
  checkForm: {
    type: Function,
    default(e) {
      console.log('Please override this method!')
    }
  }
}

then when calling it in signup.vue

<auth-form :check-form="checkForm" />  //pass parent's method into children props

methods: {
  checkForm() {
    console.log("success") // this will override the default one
  }
}

answered May 19, 2020 at 2:16

Jake Lam

3,4723 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Override VueJS component methods from another component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related