Search code examples
vue.jsslot

Easy way to set a slot with a string of a variable?

There are many slot examples but no clair and simple as I need... I need something like

 var x="Hello";
 $slot = x;

that is what I need...

In a concrete example: https://jsfiddle.net/2qdh3x3v/
I need a easy way to set slot header to "HELLO" when click "ShowModal1", and to "BYE!" when click "ShowModal2".

Solution

  • You can create a variable and change it by clicking on the desired button:

    <button id="show-modal" @click="(header = 'HELLO') && (showModal = true)">
  Show Modal1
</button>
<button id="show-modal" @click="(header = 'BYE!') && (showModal = true)">
  Show Modal2
</button>
...
<h3 slot="header">{{header}}</h3>

    https://jsfiddle.net/6k9drL1t/1/