Why does position of x-template section matter for vue templates to work with data? Why does position of x-template section matter for vue templates to work with data? vue.js vue.js

Why does position of x-template section matter for vue templates to work with data?


The reason for this problem is the following:

  1. Vue tries to render #app
  2. Vue gets the the template to render from html DOM
  3. Vue sees that there is a message reference, this works
  4. Vue sees that there is a component reference to my-component, it adds it to the render stack
  5. Vue sees a reference to secondmsg, and then fails

If it didn't fail it would now continue with rendering my-component

As you already discovered, the following works for the problem:

  • don't access secondmsg. Then, the component renders right. Or:
  • if you don't use the x-template version but rather use inline-template for the component. Or:
  • if you move the script section below the div closing the vue app


The parent Vue is being attached to #app, which includes the x-template. Attaching a Vue to an element tells Vue to use the contents of that element as a template to create the DOM. Since the x-template is in there, and it has an interpolation string in it, the parent Vue tries to do the interpolation, but secondmsg isn't defined in the parent.


matomo