CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
user6253247
user6253247

Reputation:

Vue render button

My question is about render a button on vue instance, to click in a button and then it render another button with event click, If I simple mount the button it dont get the function tes.

const Hello = {
  props: ['text'],
  template: '<button v-on:click="tes"> </button> ',
};

new Vue({
  el: '#app',
  data: {
    message: 'Click me'
  },
  methods:{
        alertar: function(event){
                      const HelloCtor = Vue.extend(Hello);
            var instance = new HelloCtor({
                    propsData: {
                  text: 'HI :)'
                }
            })

                instance.$mount() // pass nothing
           this.appendChild(instance.$el)
      },
      tes: function(){
            alert('Teste');
      }
  }
})

Erro :

vue.js:597 [Vue warn]: Invalid handler for event "click": got undefined

(found in <Root>)
warn @ vue.js:597
(index):52 Uncaught TypeError: this.appendChild is not a function
    at Vue.alertar ((index):52)
    at invoker (vue.js:2029)
    at HTMLParagraphElement.fn._withTask.fn._withTas

Upvotes: 0

Views: 1773

Answers (2)

keysl
keysl

Reputation: 2167

Just expanding @Philip answer Basically you can't access parent methods in programatically created components. You need to specify the methods inside the child components.

const Hello = {
  props: ['text'],
  template: '<button v-on:click="this.tes"> Vue Generated</button> ',
        methods: {
    tes: function(){
      alert('Teste');
    }}
};

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  mounted(){
    this.alertar()
  },
  methods:{
        alertar: function(event){
          const HelloCtor = Vue.extend(Hello);
            var instance = new HelloCtor({
              propsData: {
                  text: 'HI :)'

                }
            })

            instance.$mount() // pass nothing
          this.$refs.container.appendChild(instance.$el)
      },
      tes: function(){
            alert('Teste');
      }
  }  
})

Check this fiddle here https://jsfiddle.net/50wL7mdz/370645/

However in some cases you may be able to access the parent components methods using $parent directive which I believe will not work when components is created programatically.

Upvotes: 0

Philip Feldmann
Philip Feldmann

Reputation: 8375

The problem is that you create a child component inside of your parent Vue that contains the template with the binding to the tes function. That means that the child will look in its own methods for tes, however it is a property of your parent, not of the child itself so it will never be able to find it in its own scope. You have to add the function to the child component instead:

const Hello = {
  props: ['text'],
  template: '<button v-on:click="tes"> </button> ',
  methods: {
    tes: function(){
      alert('Teste');
    }
  }
};

Upvotes: 1

Related Questions