javascripthtmlvue.jscustom-tag

vue js extend standard input control e.g. textarea

With vue.js: is it possible to simply extend standard HTML-input without putting it in a wrapper element?

I'd like to extend textarea like this:

Vue.component('custom-textarea', {
  data () => {
    return {
    }
  },
  template: '<textarea></textarea>'
});

I've tried to use the textarea tag as the only and root tag of the vue template, but that hasn't worked at all.

I know, I could achieve a custom textarea by simply wrapping it e.g. in a DIV-tag like:

template: '<div><textarea></textarea></div>'

So, is there a way at all to avoid the wrapper tag and simply extend textarea in vue.js?

Solution

  • Since you have textarea as the only root element, you can do what you are doing using template: '<textarea></textarea>'. Vue will not complain.