Shared variables need to be assigned in the component's script tag

[hichem-dahi]

Using contactsGlobal in the HTML template doesn't work. I had to assign the contacts variable from the global one contactsGlobal.

<script>
  var contactsGlobal = [{
    firstname: 'Hichem',
    lastname: 'Dahi',
    gender: 'Male'
  },
  {
    firstname: 'Jessie',
    lastname: 'James',
    gender: 'Male'
  }]
</script>

<div @name="contacts">
  <div :for="contact in contacts">
    <card :contact="contact"></card>
  </div>
  <add-contact></add-contact>
  <script>
    contacts = contactsGlobal
  </script>
</div>

am I doing something wrong?

[tipiirai]

Yes. This is the intended behavior. The template expressions only work with instance variables, that are assigned on the nested script tag.