Submit a form from a Modal in Vue js

Question

I need to send a form from a modal. Not using a full Vue app, but inserting Vue.js in my HTML page.

I tried a lot of unsuccesful things with my current modal, so I reduced it to the basic modal example I used for the first time https://vuejs.org/v2/examples/modal.html
For the form, I used also the most basic form validation example at https://vuejs.org/v2/cookbook/form-validation.html (I have it working in other places).
And I have created this unsuccessful fiddle:

https://jsfiddle.net/JIBRVI/03qnok9m/53/

Vue.component('modal', {
  template: '#modal-template'
})
// start app
// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  data: {
    showModal: false,
    errors: [],
    name: ''
  },
  methods: {
    checkForm: function (e) {
      if (this.name) {
        return true
      }
      this.errors = []
      if (!this.name) {
        this.errors.push('Name required.')
      }
      e.preventDefault()
    }
  }

})

In the basic modal example I added the form with a field, a submit button and a placeholder to show errors. Also the input field «name» and the array «errors» to the data section in the app. I also added the «checkForm» method.

The main error says:

Property or method "checkForm" 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

Maybe the main page can communicate with the modal, so data and methods from the main page can’t be used.

I also tried to make a component with the form, but it didn’t work either. I can’t communicate with the modal.

Any help will be aprreciated.

Nikhil Joshi Nikhil Joshi · Accepted Answer · 2020-10-13T23:30:19

You need to move the name and checkform methods to the modal component. You have currently defined those two in the app component and are trying to access it from the modal which is in the modal component.

Vue.component('modal', {
  template: '#modal-template',
  data(){
    return {
        name: '',
        errors: [],
    }
  
  },
  methods: {
    checkForm: function (e) {
      if (this.name) {
        return true
      }

      this.errors = []

      if (!this.name) {
        this.errors.push('Name required.')
      }

      e.preventDefault()
    }
  }
})

Submit a form from a Modal in Vue js

1 Answers