Render component template outside it with vue.js

Question

I have a template:

var playersList = Vue.extend({
    props: ['players'],
    template: '#players-template'
});

Vue.component('players', playersList);

new Vue({
    el: 'body',
    methods: {
        someMethod: function() {
            //JSON data from request comes here
            //Want to render template of players component with that data
        }
    }
});

I'm new with Vue.js and don't know how could I make it possible. How can I render the template with data from AJAX request? Someone posted a solution with v-view but documentation for it is gone at official website.

audiojames · Accepted Answer · 2020-01-12 06:36:11Z

1

You have to specify the data in your Vue instance where the response is going to be stored

var playersList = Vue.extend({
    template: '#players-template',
    props: ['players']
    }
});

Vue.component('players', playersList);

new Vue({
    el: 'body',
    data: {
      players: ''
    },
    methods: {
        someMethod: function() {
            //JSON data from request comes here
            //Want to render template of players component with that data
            this.$set('players', data);
        }
    }
});

in your html
<body>
  <ul>
    <li v-for="player in players">
      <players :players="players"></players>
    </li>
  </ul>
<template id="players-template">
    <p>{{player.name}}</p>
</template>
</body>

edited Jan 12, 2020 at 6:36

audiojames

1321 silver badge12 bronze badges

answered Jan 13, 2016 at 21:31

Ricardo Ordonez

761 silver badge9 bronze badges

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

Comments

Jeff · Accepted Answer · 2016-01-13 21:24:47Z

0

Once you create the Vue app on the body element, you can use its component anywhere within that element. Since you named the component players, you'd render it like this:

<body>
    <players :players="players"></players>
</body>

Then in your Vue

new Vue({
el: 'body',
data: function(){
    return { players:[] }
},
methods: {
    someMethod: function() {
        //var result = ajax result
        this.players = result;
    }
}
});

Since players is a prop on your list component, you pass it in with :players="players". Then if players updates on the parent app, the list component would automatically update according to the new list.

edited Jan 13, 2016 at 21:24

answered Jan 13, 2016 at 21:19

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Collectives™ on Stack Overflow

Render component template outside it with vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related