CODEWITHSUNDEEP
vue.js
Artem Terehov
Artem Terehov

Reputation: 55

vue component and alert on click button

I`m trying to make my button (which is inside vue component) to show alert when pressed, and a message is input field content.

so far i have following:

HTML

    <vue-form-input placeholder="Name"></vue-form-input>     
    <vue-form-submit button-text="Submit"></vue-form-submit>

JS

Vue.component('vue-form-input', {
props: {
    placeholder: {
        String,
        required: true
    }
},
template:`
    <div>
        <input type="text" class="form-control" :placeholder="placeholder">
    </div>` });   

Vue.component('vue-form-submit', {
props: {
    buttonText: {
        String,
        required: true,
        default: 'Submit' }

},
template:`
    <div>
        <button v-on:click="submitBut" class="btn btn-lg btn-primary btn-block" type="submit">{{buttonText}}</button>
    </div>` });


new Vue({
        el: '#forms',
        data: {

        },
        methods: {
            submitBut: () => {
                alert('Blablabla')
            }
        }, })

There are console errors 1) Property or method "submitBut" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 2) Invalid handler for event "click": got undefined

Can someone please help me with that?

Upvotes: 3

Views: 25879

Answers (1)

Happyriri
Happyriri

Reputation: 4443

Emit from child to parent (see this post to understand) :

Vue.component('vue-form-input', {
  props: {
    initName: { type: String },
    placeholder: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      name: this.initName
    }
  },
  template:`
    <div>
        <input v-model="name" type="text" class="form-control" :placeholder="placeholder">
    </div>`,
  watch: {
    name: function() {
      this.$emit('change', this.name);
    }
 }
});   

Vue.component('vue-form-submit', {
  props: {
      buttonText: {
          String,
          required: true,
          default: 'Submit' }

  },
  template:`
      <div>
          <button v-on:click="submitBut" class="btn btn-lg btn-primary btn-block" type="submit">{{buttonText}}</button>
      </div>`,
      
  methods: {
    submitBut: function() {
      this.$emit('submit');
    }
  }
});


new Vue({
  el: '#forms',
  data: {
		name: ''
  },
  methods: {
    changeInput: function(name) {
      this.name = name;
    },
    submitBut: function() {
      alert(this.name);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>


<div id="forms">

  <vue-form-input @change="changeInput" :init-name="name" placeholder="Name"></vue-form-input>
  <vue-form-submit @submit="submitBut" button-text="Submit"></vue-form-submit>
  Parent : {{ name }}
    
</div>

Upvotes: 4

Related Questions