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>
  </div>
</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 个答案: