programing

Vue 및 Bootstrap 4에 행당 3장의 카드를 표시하는 방법

newsource 2022. 8. 9. 23:05

Vue 및 Bootstrap 4에 행당 3장의 카드를 표시하는 방법

제목으로 알 수 있을 것 같아요.내 바이올린을 보면 제품을 루프하고 부트스트랩 카드를 한 줄에 3번 인쇄하려고 하는데, 1번 인쇄하면 2번 새 컬럼을 추가할 수 있습니다.이 컬럼이 몇 번 더 추가되면 오른쪽에 2개의 오프셋이 있는 공백이 나타납니다.

그래서 vue나 내 css 혹은 둘 다에 도움이 필요해.제 생각엔 필요한 것은 단지 인쇄하는 것 뿐입니다.div의 클래스와 함께row그리고.col언제index mod 3 = 0vue로 어떻게 해야 할지 모르겠어요.

HTML

 <div id="app">
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center">Products</h1>
      <hr />
    </div>
  </div>


  <img v-if="loading" src="https://i.imgur.com/JfPpwOA.gif" />

  <section v-else style="margin-left: 10px;">
    <div v-for="(product, index) in products.slice(0, 15)">
      <!-- if we are 3 cards wide start a new row -->
      <div :class="{'row':(index % 3 === 0)}">
        <div :class="{'col-md-12':(index % 3 === 0)}">
          <div class="card" style="width: 16rem; float:left;">
            <img class="card-img-top" :src="product.thumbnailUrl" alt="card image collar">
            <div class="card-body">
              <h5 class="card-title">Product {{index}}</h5>
              <p class="card-text">Product {{index}} - {{product.title}}</p>
              <button v-on:click="addProductToCart(product)" class="btn btn-primary">Add To Cart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

JS

var prodData = [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "http://placehold.it/600/771796",
    "thumbnailUrl": "http://placehold.it/150/771796"
  },
  {
    "albumId": 1,
    "id": 3,
    "title": "officia porro iure quia iusto qui ipsa ut modi",
    "url": "http://placehold.it/600/24f355",
    "thumbnailUrl": "http://placehold.it/150/24f355"
  },
  {
    "albumId": 1,
    "id": 4,
    "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
    "url": "http://placehold.it/600/d32776",
    "thumbnailUrl": "http://placehold.it/150/d32776"
  },
  {
    "albumId": 1,
    "id": 5,
    "title": "natus nisi omnis corporis facere molestiae rerum in",
    "url": "http://placehold.it/600/f66b97",
    "thumbnailUrl": "http://placehold.it/150/f66b97"
  },
  {
    "albumId": 1,
    "id": 6,
    "title": "accusamus ea aliquid et amet sequi nemo",
    "url": "http://placehold.it/600/56a8c2",
    "thumbnailUrl": "http://placehold.it/150/56a8c2"
  },
  {
    "albumId": 1,
    "id": 7,
    "title": "officia delectus consequatur vero aut veniam explicabo molestias",
    "url": "http://placehold.it/600/b0f7cc",
    "thumbnailUrl": "http://placehold.it/150/b0f7cc"
  },
  {
    "albumId": 1,
    "id": 8,
    "title": "aut porro officiis laborum odit ea laudantium corporis",
    "url": "http://placehold.it/600/54176f",
    "thumbnailUrl": "http://placehold.it/150/54176f"
  },
  {
    "albumId": 1,
    "id": 9,
    "title": "qui eius qui autem sed",
    "url": "http://placehold.it/600/51aa97",
    "thumbnailUrl": "http://placehold.it/150/51aa97"
  }
];

new Vue({
  el: "#app",
  data() {
    return {
      loading: false,
      cart: []
    }
  },
  methods: {
    addProductToCart: function(product) {
      this.cart.push(product);
      console.log(this.cart);
    }
  },
  created() {
    this.loading = true;
        this.products = prodData;
    this.loading = false;

  }
})

바이올린을 켜다

Vue를 간단하게 사용할 수 있습니다.v-for(가 아니라) 열을 반복하다.row)...

그v-for컬럼에 있어야 합니다.사용하다.col-md-4한 줄에 3장의 카드로.부트스트랩을 사용하면 열을 줄바꿈할 수 있으므로 반복할 필요가 없습니다.rowdivs...

https://jsfiddle.net/vbpb4me5/

<div class="row">
    <div class="col-md-4" v-for="(product, index) in products.slice(0, 15)">
          <div class="card h-100">
            <img class="card-img-top" :src="product.thumbnailUrl" alt="card image collar">
            <div class="card-body">
              <h5 class="card-title">Product {{index}}</h5>
              <p class="card-text">Product {{index}} - {{product.title}}</p>
              <button v-on:click="addProductToCart(product)" class="btn btn-primary">Add To Cart</button>
            </div>
          </div>
     </div>
 </div>

이것에 의해, 적절한 그리드 구조(row>col)가 작성됩니다.또, 다음의 점에 주의해 주세요.row에 배치해야 합니다.container또는container-fluid수평 스크롤 바를 방지합니다.

코드플라이 데모

연관된:부트스트랩 4에서 확인란 세 열 확인란 사용

코드에서는 다음과 같은 예기치 않은 결과가 발생합니다.

<div>
  <div class="row">Your card</div>
  <div class="">Your card</div>
  <div class="">Your card</div>
  <div class="row">Your card</div>
</div>

하나의 대안 솔루션은 1D 어레이를 2D로 변경한 후 중첩된 루프를 사용하여 목표에 도달하는 것입니다.

1D 어레이를 2D 어레이로 변환하는 기능은 다음과 같습니다.

get2DArrary: function(arr) {
  let newArr = [];
  while(arr.length) newArr.push(arr.splice(0,3))
  return newArr
}

다음은 하나의 샘플입니다.

var prodData = [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "http://placehold.it/600/771796",
    "thumbnailUrl": "http://placehold.it/150/771796"
  },
  {
    "albumId": 1,
    "id": 3,
    "title": "officia porro iure quia iusto qui ipsa ut modi",
    "url": "http://placehold.it/600/24f355",
    "thumbnailUrl": "http://placehold.it/150/24f355"
  },
  {
    "albumId": 1,
    "id": 4,
    "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
    "url": "http://placehold.it/600/d32776",
    "thumbnailUrl": "http://placehold.it/150/d32776"
  },
  {
    "albumId": 1,
    "id": 5,
    "title": "natus nisi omnis corporis facere molestiae rerum in",
    "url": "http://placehold.it/600/f66b97",
    "thumbnailUrl": "http://placehold.it/150/f66b97"
  },
  {
    "albumId": 1,
    "id": 6,
    "title": "accusamus ea aliquid et amet sequi nemo",
    "url": "http://placehold.it/600/56a8c2",
    "thumbnailUrl": "http://placehold.it/150/56a8c2"
  },
  {
    "albumId": 1,
    "id": 7,
    "title": "officia delectus consequatur vero aut veniam explicabo molestias",
    "url": "http://placehold.it/600/b0f7cc",
    "thumbnailUrl": "http://placehold.it/150/b0f7cc"
  },
  {
    "albumId": 1,
    "id": 8,
    "title": "aut porro officiis laborum odit ea laudantium corporis",
    "url": "http://placehold.it/600/54176f",
    "thumbnailUrl": "http://placehold.it/150/54176f"
  },
  {
    "albumId": 1,
    "id": 9,
    "title": "qui eius qui autem sed",
    "url": "http://placehold.it/600/51aa97",
    "thumbnailUrl": "http://placehold.it/150/51aa97"
  }
];
  
new Vue({
  el: "#app",
  data() {
    return {
      loading: false,
      cart: []
    }
  },
  methods: {
    addProductToCart: function(product) {
      this.cart.push(product);
      console.log(this.cart);
    },
    get2DArrary: function(arr) {
      let newArr = [];
      while(arr.length) newArr.push(arr.splice(0,3))
      return newArr
    }
  },
  created() {
    this.loading = true;
		this.products = prodData;
    this.loading = false;
      
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 <div id="app">
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center">Products</h1>
      <hr />
    </div>
  </div>

    
  <img v-if="loading" src="https://i.imgur.com/JfPpwOA.gif" />
    
  <section v-else style="margin-left: 10px;">
    <div v-for="(row, rowIndex) in get2DArrary(products.slice(0, 15))" :key="rowIndex" class="row">
    <div v-for="(product, productIndex) in row" :key="productIndex" class="col-md-4">
      <!-- if we are 3 cards wide start a new row -->
        <div>
          <div class="card" style="width: 16rem; float:left;">
            <img class="card-img-top" :src="product.thumbnailUrl" alt="card image collar">
            <div class="card-body">
              <h5 class="card-title">Product {{index}}</h5>
              <p class="card-text">Product {{index}} - {{product.title}}</p>
              <button v-on:click="addProductToCart(product)" class="btn btn-primary">Add To Cart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

언급URL : https://stackoverflow.com/questions/50119816/how-to-make-vue-and-bootstrap-4-show-3-cards-per-row

'programing' 카테고리의 다른 글

VueRouter.beforeEach()에서 Vuex에 액세스할 때 저장소가 정의되지 않음  (0) 2022.08.09
Java에서 메서드의 기본 범위는 무엇입니까?  (0) 2022.08.09
조건이 충족되는 경우에만 슬롯의 폴백 콘텐츠 사용  (0) 2022.08.09
strdup() - C에서 무엇을 합니까?  (0) 2022.08.09
JavaBeans가 사용되는 장소?  (0) 2022.08.09

'programing'의 다른글

  • 현재글Vue 및 Bootstrap 4에 행당 3장의 카드를 표시하는 방법

관련글

댓글

티스토리툴바