vuejs-paginate
vuejs-paginate copied to clipboard
[Question] No style on component
Sorry for creating the issue, didn't find any discord/help links.
I'm trying to use this component in my vue2+vuetify project, here is my code:
main.js
import Vue from "vue";
import App from "./components/App.vue";
import store from "./store"
import router from "./router";
import vuetify from "./plugins/vuetify";
import "./sass/variables.scss";
import "vuetify/dist/vuetify.min.css";
import Vuelidate from "vuelidate";
import Paginate from 'vuejs-paginate'
Vue.use(Vuelidate);
Vue.component('paginate', Paginate)
Vue.config.productionTip = false;
export const vm = new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount("#app");
Component:
<template>
<paginate
:page-count="10"
:container-class="'pagination'"
:click-handler="changed"
:page-class="'page-item'"
>
</paginate>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
page: this.$store.getters.getCurrentPage,
};
},
computed: {
...mapGetters(["getPageSize"]),
paginationLen: function () {
return this.$store.getters.paginationLen;
},
},
methods: {
changed: function () {
// console.log("Page changed:" + this.page);
this.$store.dispatch({ type: "setCurrentPage", page: this.page });
this.$emit("changed");
},
},
};
</script>
<style lang="css">
.pagination {
}
.page-item {
}
</style>
Result:
I've added bootstrap to my package_json, but still no luck.
Sorry for creating the issue, didn't find any discord/help links.
I'm trying to use this component in my vue2+vuetify project, here is my code:
main.js
import Vue from "vue"; import App from "./components/App.vue"; import store from "./store" import router from "./router"; import vuetify from "./plugins/vuetify"; import "./sass/variables.scss"; import "vuetify/dist/vuetify.min.css"; import Vuelidate from "vuelidate"; import Paginate from 'vuejs-paginate' Vue.use(Vuelidate); Vue.component('paginate', Paginate) Vue.config.productionTip = false; export const vm = new Vue({ router, store, vuetify, render: h => h(App), }).$mount("#app");
Component:
<template> <paginate :page-count="10" :container-class="'pagination'" :click-handler="changed" :page-class="'page-item'" > </paginate> </template> <script> import { mapGetters } from "vuex"; export default { data() { return { page: this.$store.getters.getCurrentPage, }; }, computed: { ...mapGetters(["getPageSize"]), paginationLen: function () { return this.$store.getters.paginationLen; }, }, methods: { changed: function () { // console.log("Page changed:" + this.page); this.$store.dispatch({ type: "setCurrentPage", page: this.page }); this.$emit("changed"); }, }, }; </script> <style lang="css"> .pagination { } .page-item { } </style>
Result:
I've added bootstrap to my package_json, but still no luck.
Hello,
I think the design is not working properly because you are overriding their class like pagination and page-item - Not much sure.
I suggest you to try removing those classes from your component.
Hopefully, it might work.
you should import bootstrap.css or this part of css (extracted from bootstrap)
.pagination > li > a, .pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li {
display: inline;
}
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
color: #777;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}