如何使用 Vuetify 网格在 v-for 循环中显示商店项目？

Posted 2023-02-22

【中文标题】如何使用 Vuetify 网格在 v-for 循环中显示商店项目？

【英文标题】：How to display store items in v-for loop with Vuetify grid?

【发布时间】：2019-11-24 06:25:41

【问题描述】：

我正在尝试使用 Vuetify 网格系统在 v-for 循环中显示卡片项目。循环设置为遍历从 Vuex 存储文件（“item in this.$store.getters.getItems”）返回到模板的动态输入的 Firestore 项目，然后将其呈现为 Vuetify 卡。我成功地设置了循环以在容器内的小卡片中呈现项目。但是，我希望这些卡片在网格中呈现。换句话说，我想创建一个断点，以便在 3 张牌之后，例如，第 4、第 5 和第 6 张牌下降到新的一行。我怎样才能做到这一点？我了解如何在没有 v-for 循环中的 Vuex getter 方法的情况下以更简单的设置执行此操作。但是当 Vuex 方法开始进入画面时，这是如何工作的呢？我的代码如下：

首页.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.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')
    
  
)

【参考方案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 放在循环中，并在每次需要新行时打印一个新行。

注意

我是 vuetify 的新手，所以不确定是否有更好的方法来实现这一点。

【讨论】：

您好马里奥，再次感谢您去年回答这个问题。你愿意看看另一个与 Vue.js 网格相关的问题吗？ ***.com/questions/59952741/…