Vuetify 그리드를 사용하여 v-for 루프의 저장소 항목을 표시하는 방법

Vuetify 그리드를 사용하여 v-for 루프의 저장소 항목을 표시하는 방법

Vuetify 그리드 시스템에서 v-for 루프에 카드 항목을 표시하려고 합니다.루프는 Vuex 스토어 파일에서 템플릿으로 반환되는 동적으로 입력된 Firestore 항목을 통해 반복되도록 설정됩니다(이 경우 항목).$store.getters.getItems)를 Vuetify 카드로 렌더링합니다.용기의 작은 카드로 아이템을 렌더링하는 루프를 설정하는 데 성공했습니다.다만, 이 카드는 그리드로 렌더링 해 주었으면 합니다.즉, 예를 들어 4번째, 5번째, 6번째 카드 등 3장의 카드 후에 새로운 행으로 떨어지도록 브레이크 포인트를 만들고 싶습니다.어떻게 하면 좋을까요?v-for 루프에서 Vuex getter 메서드를 사용하지 않고 보다 간단한 설정으로 이 작업을 수행하는 방법을 이해했습니다.하지만 Vuex 메서드가 도입되기 시작하면 어떻게 작동합니까?코드는 다음과 같습니다.

Home.vue

<template>
 <div id="home">
   <v-container>
     <v-text-field v-model="myTodo" placeholder="add input"></v-text-field>
     <v-btn @click="addToDo">Add</v-btn>
   </v-container>

  <v-container>
    <v-flex md7>
      <v-card class="elevation-0 transparent card-container grey">
        <v-card-title primary-title class="layout justify-center">
          <div class="headline text-xs-center">CARD CONTAINER</div>
        </v-card-title>
        <v-flex d-flex>
          <v-card class="card-container" v-for="item in this.$store.getters.getItems" :key="item.id">
            {{ item.title }}<v-btn @click="deleteItem(item.id)">Delete</v-btn>
          </v-card>
        </v-flex>
      </v-card>
    </v-flex>
  </v-container>
 </div>
</template>

<script>
import { db } from '@/main'

export default {
  name: 'home',
  beforeCreate: function () {
    this.$store.dispatch('setItems')
  },
  data: function () {
    return {
      myTodo: '',
      errors: ''
    }
  },
  methods: {
    addToDo: function () {
      this.errors = ''
      if (this.myTodo !== '') {
        db.collection('items').add({
          title: this.myTodo,
          created_at: Date.now()
        }).then((response) => {
          if (response) {
            this.myTodo = ''
          }
        }).catch((error) => {
          this.errors = error
        })
      } else {
        this.errors = 'Please enter some text'
      }
    },
    deleteItem: function (id) {
      if (id) {
        db.collection("items").doc(id).delete().then(function() {
          console.log('Document successfully deleted')
        }).catch(function(error) {
          this.error = error
        })
      } else {
        this.error = 'Invalid ID'
      }
    }
  }
}
</script>

<style>
  .card-container {
    margin: 10px;
    padding: 10px;
  }
</style>

store.displaces를 설정합니다.

import Vue from 'vue'
import Vuex from 'vuex'
import { db } from '@/main'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: null
  },
  getters: {
    getItems: state => {
      return state.items
    }
  },
  mutations: {
    setItems: state => {
      let items = []
      db.collection('items').orderBy('created_at').onSnapshot((snapshot) => {
        items = []
        snapshot.forEach((doc) => {
          items.push({ id: doc.id, title: doc.data().title })
        })
        state.items = items
      })
    }
  },
  actions: {
    setItems: context => {
      context.commit('setItems')
    }
  }
})

실제로는 카드 목록을 만들고 있을 뿐이며, 카드 리스트는 카드 리스트 안에 표시됩니다.v-flex더 이상의 지시 없이요

그리드 레이아웃을 사용하려면v-layout더해서v-flex.

<v-flex d-flex>
   <v-layout wrap>
       <v-flex md4 v-for="item in this.$store.getters.getItems" :key="item.id">
           <v-card class="card-container">
            {{ item.title }}<v-btn @click="deleteItem(item.id)">Delete</v-btn>
          </v-card>
       </v-flex>
   </v-layout>
</v-flex>

이 코드로 카드를 포장합니다.v-layout와 함께wrap새로 쓸 필요가 없는 속성v-layout로우를 위해.

for 루프가 로 이동됩니다.v-flex그리고 4사이즈를 셀에 줍니다.

그리드 레이아웃에는 12개의 상자가 있으며, 3개가 필요한 경우 각 상자에 4개의 크기(md4)를 지정해야 합니다.

매우 유연한 레이아웃이 필요한 경우,v-layout새 행이 필요할 때마다 새 행을 인쇄합니다.

메모

나는 뷰티즘을 처음 접하기 때문에, 이것을 달성할 수 있는 더 좋은 방법이 없을지 잘 모르겠다.

언급URL : https://stackoverflow.com/questions/57041634/how-to-display-store-items-in-v-for-loop-with-vuetify-grid