如何使用Vuetify網格在v-for循環中顯示商店商品？

Question

我正在嘗試使用Vuetify網格系統在v-for循環中顯示卡片項目。 設置循環以遍歷從Vuex存儲文件返回到模板的動態輸入的Firestore項目（“ this。$ store.getters.getItems”中的項目），然后將這些項目呈現為Vuetify卡。 我成功設置了循環，以將項目呈現在容器內的小卡片中。 但是，我希望這些卡在網格中呈現。 換句話說，我想創建一個斷點，以便在第3張卡（例如第4張，第5張和第6張卡）之后下降到新行。 我該如何實現？ 我知道如何在v-for循環中沒有Vuex getter方法的情況下以更簡單的設置執行此操作。 但是，當Vuex方法開始輸入圖片時，這如何工作？ 我的代碼如下：

主場

<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.js

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')
    }
  }
})

Answer 1

實際上，您只是在創建一張卡片列表，它們將在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>

在此代碼中，我使用帶有wrap屬性的v-layout包裝卡片，不需要為該行編寫新的v-layout 。

將for循環移至v-flex然后將大小4賦予單元格。

在網格布局中，您有12個框，如果需要3個框，則每個框的大小必須為4（md4）。

如果需要非常靈活的布局，則應將v-layout放在循環中，並在每次需要新行時打印新v-layout 。

注意

我是新來的，所以不確定是否有更好的方法可以實現這一目標。