環境
- Windows10
- Docker for Desktop
- Vue.js(vue-cliを使用)
- Vuetify.js
- chrome
Vuex等は使っていません。
現状
App.vue
1// App.vue 2<template> 3 <v-app id="inspire"> 4 <v-sheet> 5 <v-app-var> 6 <v-slider 7 v-model="sliderCols" 8 thumb-label 9 max="6" 10 min="1" 11 ></v-slider> 12 </v-app-var> 13 <v-container fluid fill-height> 14 <v-row> 15 <v-col 16 v-for="book in books" 17 v-bind:key="book.id" 18 v-bind:cols="sliderCols" 19 > 20 <v-img :src="book.frontCover"></v-img> 21 </v-col> 22 </v-row> 23 </v-container> 24 </v-sheet> 25 </v-app> 26</template> 27 28<script> 29export default { 30 data: () => ({ 31 books: [ 32 { 33 frontCover: 34 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 35 }, 36 { 37 frontCover: 38 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 39 }, 40 { 41 frontCover: 42 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 43 }, 44 { 45 frontCover: 46 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 47 }, 48 { 49 frontCover: 50 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 51 }, 52 { 53 frontCover: 54 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 55 }, 56 { 57 frontCover: 58 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 59 }, 60 { 61 frontCover: 62 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 63 }, 64 { 65 frontCover: 66 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 67 }, 68 { 69 frontCover: 70 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 71 }, 72 { 73 frontCover: 74 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 75 }, 76 { 77 frontCover: 78 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 79 }, 80 { 81 frontCover: 82 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 83 }, 84 { 85 frontCover: 86 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 87 }, 88 { 89 frontCover: 90 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 91 }, 92 { 93 frontCover: 94 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 95 }, 96 { 97 frontCover: 98 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 99 }, 100 { 101 frontCover: 102 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 103 }, 104 { 105 frontCover: 106 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 107 }, 108 { 109 frontCover: 110 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 111 }, 112 { 113 frontCover: 114 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 115 }, 116 { 117 frontCover: 118 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 119 }, 120 { 121 frontCover: 122 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 123 }, 124 { 125 frontCover: 126 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 127 }, 128 { 129 frontCover: 130 "https://www.oreilly.co.jp/books/images/picture_large978-4-87311-936-6.jpeg", 131 }, 132 ], 133 sliderCols: 4, 134 }), 135 136}; 137</script>
以下のようなコンテンツ一覧のサイズをスライダーで変更しようとしています。
今の実装だとスライダーとv-bind:colsの値を連動させており、たとえば6から5に変更すると、コンテンツ一覧の行数が12行から6行にまで一気に減り、微調整ができなくなっています。
実現したいこと
スライダーをMAX:12 MIN:1のように上限下限設定して、1つずらすごとにコンテンツ一覧の表示も1行ずつ増減するようにしたいです。
Vuetifyのグリッドシステムでは実現は難しいでしょうか?
あなたの回答
tips
プレビュー