vuejs-paginator пример html разметки
У меня есть довольно глупый вопрос 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
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и теперь он работает правильно:
animals, описанных в этом примере. Я просто вижу отключенные Previousи Nextстраницы вместе с "страницей".. Очень раздражает!!!! Есть идеи, почему список животных не отображается?
<v-paginator resource_url="api/animals". Я думаю, что это должно быть <v-paginator :resource_url="resource_url". Я обновлю свой пост
<v-paginator :resource_url="resource_url" @update="updateResource"></v-paginator> до сих пор нет радости. Это не может быть так сложно!
VuePaginator.vue и utils.js. Просто предположение конечно :)