时间戳

首页 > 解决方案 > vuejs-paginator 示例 html 标记

vue.js - vuejs-paginator 示例 html 标记

问题描述

我有一个非常愚蠢的问题：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>

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

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

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

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

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

标签： vue.jsvuejs2

解决方案

您可以通过将内容添加到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>

类似的东西。

<div id="app"></div>您的 html 中还需要一个首字母。这是 Vue 将挂载应用程序并加载内容的元素。

编辑

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

我对以下内容进行了更改，codepen现在可以正常工作：

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

推荐阅读