VueJS : Getting innerHTML of custom component

Question

I am trying to build very simple bootstrap alert component but Iam unable to figure out how to get innerHTML of my custom component.

Code:

Vue.component('my-alert', {
  template: '#vue-alert',
  props: ['type', 'title', 'message'],
  created: function() {        
    this.message = this.innerHTML; // <---- NOT WORKING
  }
});

var vm = new Vue({
  el: 'body'
});

HTML:

<my-alert type="success" title="Important">My Message here.</my-alert>

I want to show the component whatever text is provided in it, in this case it should show My Message here.

Here is example of it

tony19 · Accepted Answer · 2022-07-15 20:30:06Z

9

Okay I figured out, I needed to use the <slot></slot>.

<template id="vue-alert">
  <div v-if="show" class="alert alert-{{type}} alert-dismissible" role="alert">
  <button @click="removeAlert" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
  </button>
  <strong>{{title}}!</strong> <slot></slot>
  </div>
</template>

edited Jul 15, 2022 at 20:30

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 20, 2016 at 16:35

dev02

1,8663 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS : Getting innerHTML of custom component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related