Creating a dynamic button with Vue

Question

Creating a dynamic button with Vue

I need help with rendering a button on a Vue instance. I want to be able to click on the button and have another button render with a click event. When I simply mount the button, the function doesn't work.

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');
      }
  }
})

Error:

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

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

The issue arises when you create a child component within your parent Vue that includes the template with the binding to the tes function. As a result, the child component will search for tes within its own methods, even though it is actually a property of the parent component. This leads to the child component being unable to locate the function within its own scope. To resolve this, you need to add the function to the child component itself:

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

Answer 2

The issue arises when you create a child component within your parent Vue that includes the template with the binding to the tes function. As a result, the child component will search for tes within its own methods, even though it is actually a property of the parent component. This leads to the child component being unable to locate the function within its own scope. To resolve this, you need to add the function to the child component itself:

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

Answer 3

Answer №2

Expanding on the answer provided by @Philip, it is important to note that parent methods cannot be accessed in programmatically created components. The methods must be specified within the child components themselves.

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');
      }
  }  
})

Take a look at this fiddle for reference: https://jsfiddle.net/50wL7mdz/370645/

While there are some cases where you may be able to access parent component methods using the $parent directive, it is unlikely to work when components are created programmatically.

Answer 4

Expanding on the answer provided by @Philip, it is important to note that parent methods cannot be accessed in programmatically created components. The methods must be specified within the child components themselves.

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');
      }
  }  
})

Take a look at this fiddle for reference: https://jsfiddle.net/50wL7mdz/370645/

While there are some cases where you may be able to access parent component methods using the $parent directive, it is unlikely to work when components are created programmatically.

Creating a dynamic button with Vue

Answer №1

Answer №2

Similar questions

Find the total duration of all items within an array by utilizing the Moment.js library

apply styling to the placeholder with CSS

Swapping out data points using JQuery

Setting up Authorization for FETCH requests in NEXT.js using .env.local

"Using the selected option from a dropdown list to pass to a PHP file for autocomplete functionality

Encountering an error message of "Cannot POST" while trying to send data through a REST client application

Implementing a function trigger upon selection in JavaScript

Extracting specific attributes from an array to showcase on a single div

Tips for defining a dynamic class variable in React with Flow

The initial loading of jQuery DataTables shows duplicate entries

How come the item I just inserted into a JavaScript array is showing up as undefined when I try to retrieve it immediately after adding it?

Increased wait time during initial execution

Error encountered during Atom execution - The command '/usr/bin/env: 'node' was not found in the directory

Having difficulty with my async custom react hooks. Is there a way to wait for the result of one hook before using it in another hook?

Guide to adding a line break following each set of 200 characters utilizing jQuery

Tips for recalling the display and concealment of a div element using cookies

Employ a for loop to generate custom shapes within the canvas

Vite/React/Express is restricting access to fetch due to the CORS policy

The AngularJS factory does not hold on to its value

Should you include the dollar sign in a Vue HTML variable or not?