Question

我有一个很愚蠢的问题，例如：vuejs-paginator，但我很难运行此示例（我是这里的后端开发人员）。

所以，我的头上有

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginator/2.0.0/vuejs-paginator.js"></script>

然后，如页面中所述，我具有：

      <script>
        new Vue({
          el: '#app',
          data () {
            return {
              // The resource variable
              animals: [],
              // Here you define the url of your paginated API
              resource_url: 'http://hootlex.github.io/vuejs-paginator/samples/animals1.json'
            }
          },
          components: {
            VPaginator: VuePaginator
          },
          methods: {
            updateResource(data){
              this.animals = data
            }
          }
        });            
      </script>

现在，我应该在HTML中使用的F是什么，我不知道，作者似乎说，我使用：

    <v-paginator resource_url="api/animals" @update="updateResource"></v-paginator>

但是，我认为这只是为了分页。 app元素应包含什么？它在哪里？该文档似乎没有显示？然后他的作者显示了一些random标记：

<ul>
   <li v-for="animal in animals">
    {{ animal.name }}
  </li>
</ul>

这应该去哪里？我应该有一个app div元素吗？

Answer 1

您可以通过将内容添加到template键来向应用程序添加内容：

<script>
        new Vue({
          el: '#app',
          data () {
            return {
              // The resource variable
              animals: [],
              // Here you define the url of your paginated API
              resource_url: 'http://hootlex.github.io/vuejs-paginator/samples/animals1.json'
            }
          },
          components: {
            VPaginator: VuePaginator
          },
          methods: {
            updateResource(data){
              this.animals = data
            }
          },
          template: `
             <div>
                <ul>
                   <li v-for="animal in animals">
                     {{ animal.name }}
                   </li>
                 </ul>
                 <v-paginator :resource_url="resource_url" @update="updateResource"></v-paginator>
             </div>
          `
        });            
      </script>

类似的东西。

您还需要在HTML中添加首字母<div id="app"></div>。这是Vue用来安装应用程序并加载内容的元素。

编辑

该插件使用this.$http，它需要某种未指定的依赖项。

我在以下codepen中进行了更改，现在可以正常使用：

https://codesandbox.io/s/competent-dream-zngzt

vuejs-paginator示例html标记

1 个答案: