vuejs-paginator пример html разметки

vuejs-paginator пример html разметки

25.12.2019 07:41:22 Просмотров 36 Источник

У меня есть довольно глупый вопрос re: 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>

Теперь, что за F я должен иметь в своем HTML, я понятия не имею, и автор, кажется, говорит, что я использую:

    <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?

У вопроса есть решение - Посмотреть?

Ответы - vuejs-paginator пример html разметки / vuejs-paginator example html markup

Является ответом!
T. Short

25.12.2019 07:53:08

Вы можете добавить контент в свое приложение, добавив его в ключ 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

https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105137519_59480301
Во-первых, спасибо за это. Я попытался повторить то, что вы сказали, но до сих пор не вижу animals, описанных в этом примере. Я просто вижу отключенные Previousи Nextстраницы вместе с "страницей".. Очень раздражает!!!! Есть идеи, почему список животных не отображается?
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105137622_59480301
Эта строка выглядит странно <v-paginator resource_url="api/animals". Я думаю, что это должно быть <v-paginator :resource_url="resource_url". Я обновлю свой пост
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105137734_59480301
Я тоже попробовал твой сахар. Я <v-paginator :resource_url="resource_url" @update="updateResource"></v-paginator> до сих пор нет радости. Это не может быть так сложно!
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105137814_59480301
Я постараюсь сделать кодовый набор для воспроизведения
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105137917_59480301
спасибо, это было бы inetresting - я определенно не могу заставить его работать - но я не vueJS dev :(
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105138147_59480301
Интересно, должен ли <div id="app"></div>быть внутри кода шаблона Vue?
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105138181_59480301
Что ж. Похоже, плагин сломан или требует какой-то внешней зависимости, которую он не проясняет. Я скопировал код в кодовую панель и исправил его. Теперь это работает: codesandbox.io/s/competent-dream-zngzt
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105138220_59480301
как вы думаете, я должен продолжать использовать этот плагин? Я вижу, что вы сделали это, чтобы работать на CP-однако, я использую только CDN - должен ли я просто переместить шаблон за пределы сценария Vue?
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105138273_59480301
Плагин небольшой. Я бы избегал CDN и делал свои собственные компоненты локально, используя код из codepen, который я создал. Вам просто нужен VuePaginator.vue и utils.js. Просто предположение конечно :)
https://stackoverflow.com/questions/59480225/vuejs-paginator-example-html-markup/59480301#comment105138422_59480301
ОК имеет смысл 0 Кет мне попробовать, как это сделать локально (я обычно работаю с C и Python, так что это для меня ново). В любом случае, Meery XMas :) я принял ваш ответ.
Закрыть X