How the Vue JS component work in Twig x-template file

Question

I've been struggling for a week now trying to understand how the Vue component work within a Twig file with x-template.

I've test my code for number of time without any luck.

new Vue ({
 el: '#app',
 data: function () {
   return {
      fname: 'John',
      lname: 'Smith'
   }
 }
});

new Vue ({
 template: '#my-template',
 data: function () {
   return {
     fname: 'Paul',
     lname: 'Smith'
   }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script type="text/x-template" id="my-template">
<div>Hello world</div>
<div>{{ fname }}</div>
</script>

<div id="app">
<h1>Test</h1>
<my-template></my-template>
</div>

stackoverflow.com/a/49154700/6689747

Alex
– Alex

2019-12-06 10:11:51 +00:00
Commented Dec 6, 2019 at 10:11 — Alex
– Alex, Commented Dec 6, 2019 at 10:11

Gander · Accepted Answer · 2019-12-06 10:28:24Z

1

If you are initializing Vue and want to use a component in it, you must register it. Component name and template ID are also two different things.

Vue.component('my-template', {
  template: '#my-html-template',
  data: function() {
    return {
      fname: 'Paul',
      lname: 'Smith'
    }
  }
})

new Vue({
  el: '#app',
  data: function() {
    return {
      fname: 'John',
      lname: 'Smith'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script type="text/x-template" id="my-html-template">
  <div>
    <div>Hello world</div>
    <div>{{ fname }}</div>
  </div>
</script>

<div id="app">
  <h1>Test</h1>
  <my-template></my-template>
</div>

answered Dec 6, 2019 at 10:28

Gander

2,0111 gold badge25 silver badges32 bronze badges

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

3 Comments

Gander Over a year ago

Also use the JavaScript debug console to catch errors, such as one root element in the template

mana Over a year ago

Thank you my friend. Cheers

mana Over a year ago

I just want to put down this, might help someone. Take note inside the "script" tag content. It has to be a one root element that wrap the content. For example - it has to have a "div" tag that wrap all the elements inside your "script" tag. Other wise you will have an error.

Chris Chen · Accepted Answer · 2019-12-06 11:11:41Z

1

How about this setup? https://codepen.io/fuleinist/pen/KKwdwdp

<script type="text/x-template" id="my-template">
<div>Hello world</div>
<div>{{ lname }}</div>
</script>


<div id="app">
  <my-template></my-template>
</div>

Then in your js file

var myTemplate = Vue.component('my-template', {
 template: '#my-template',
 props: {
    fname: String,
    lname: String,
},
 data: function () { 
   return {
     fname: 'John',
     lname: 'Smith'
   }
 },
 });

new Vue({
  el: '#app',
  components: {
    myTemplate: myTemplate,
  },
})

edited Dec 6, 2019 at 11:11

answered Dec 6, 2019 at 10:40

Chris Chen

1,3039 silver badges15 bronze badges

Collectives™ on Stack Overflow

How the Vue JS component work in Twig x-template file

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related