Passing data to component with attributes

[logistor]

I can not pass data to template component constructor when using it in layout.

<main>
  <tmpl txt='Foo'></tmpl>
</main>

<div @name="tmpl">
  <script>
  constructor({ txt }) {
    console.log(txt)  // undefined
  }
  </script>
</div>

If I use it in md file it works fine.

[tmpl txt="Foo"]

<div @name="tmpl">
  <script>
  constructor({ txt }) {
    console.log(txt)  // txt: "Foo"
  }
  </script>
</div>

Does anyone have solution to this?

[nobkd]

Can you check if it works with a self closing tag? Like <tmpl txt='Foo' />

I'm currently not on a device where I could try it out myself.

[logistor]

Yes I tested it but unfortunately it makes no difference.

[nobkd]

All of the following examples result in a print of Foo to the dev console, when saving index.md (or other files using the layout)

Note

<main>…</main> results in only the content of <main> to be rendered. Adding <slot for="content /> seems to be ignored. Ill open a bug for that. (See #369)

Template Layout (non-self-closing)

e.g. layout.html

<main>
    <tmpl txt='Foo'></tmpl>
</main>


<div @name="tmpl">
    <script>
    constructor({ txt }) {
      console.log(txt)  // txt: "Foo"
    }
    </script>
</div>

index.md

Template Layout (self-closing)

e.g. layout.html

<main>
    <tmpl txt='Foo' />
</main>


<div @name="tmpl">
    <script>
    constructor({ txt }) {
      console.log(txt)
    }
    </script>
</div>

index.md

Using as md tag / extension

e.g. layout.html

<div @name="tmpl">
    <script>
    constructor({ txt }) {
      console.log(txt)
    }
    </script>
</div>

index.md

[tmpl txt="Foo"]

If it still doesn't log for you, please open a bug report issue with a minimal reproduction

[logistor]

This is really strange.

<main>
  <tmpl :txt="['Foo']"></tmpl>
</main>

Works too.

<div @name="tmpl">
  <script>
  constructor({ txt }) {
    console.log(txt) // txt: Array ["Foo"]
  }
  </script>
</div>

And this.

<main>
  <tmpl :txt="'Foo'"></tmpl>
</main>

<div @name="tmpl">
  <script>
  constructor({ txt }) {
    console.log(txt) // txt: "Foo"
  }
  </script>
</div>