質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

0回答

781閲覧

【Vuetify】GridSystemで作成したコンテンツ一覧を1行ずつ拡大/縮小したい

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2021/06/28 02:20

編集2021/06/28 02:41

環境

  • 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のグリッドシステムでは実現は難しいでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問