使用 vue.js 在其外部渲染组件模板

Question

我有一个模板：

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
        }
    }
});

我是 Vue.js 的新手，不知道如何使它成为可能。 如何使用来自 AJAX 请求的数据呈现模板？ 有人用v-view发布了一个解决方案，但官方网站上没有相关文档。

Answer 1

您必须在将要存储响应的 Vue 实例中指定数据

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>

Answer 2

一旦你在body元素上创建了 Vue 应用程序，你就可以在该元素内的任何地方使用它的组件。 由于您命名了组件播放器，您可以像这样渲染它：

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

然后在你的 Vue

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

由于players是列表组件上的道具，因此您可以使用:players="players"传递它。 然后，如果players在父应用上更新，列表组件将根据新列表自动更新。

使用 vue.js 在其外部渲染组件模板

问题描述

2 个解决方案

解决方案1
1 2016-01-13 21:31:35

解决方案2
0 2016-01-13 21:19:31

使用 vue.js 在其外部渲染组件模板

问题描述

2 个解决方案

解决方案1 1 2016-01-13 21:31:35

解决方案2 0 2016-01-13 21:19:31

解决方案1
1 2016-01-13 21:31:35

解决方案2
0 2016-01-13 21:19:31