[英]How to display store items in v-for loop with Vuetify grid?
I am attempting to display card items in a v-for loop with Vuetify grid system. 我正在尝试使用Vuetify网格系统在v-for循环中显示卡片项目。 The loop is set up to iterate through dynamically inputted Firestore items returned to the template from a Vuex store file ("item in this.$store.getters.getItems"), which are then rendered as Vuetify cards.
设置循环以遍历从Vuex存储文件返回到模板的动态输入的Firestore项目(“ this。$ store.getters.getItems”中的项目),然后将这些项目呈现为Vuetify卡。 I was successful in setting up the loop to render the items in small cards inside a container.
我成功设置了循环,以将项目呈现在容器内的小卡片中。 However, I want these cards to render in a grid.
但是,我希望这些卡在网格中呈现。 In other words, I want to create a breaking point so that after 3 cards, for example, the 4th, 5th, and 6th card drop down to a new row.
换句话说,我想创建一个断点,以便在第3张卡(例如第4张,第5张和第6张卡)之后下降到新行。 How can I achieve this?
我该如何实现? I understand how to do this in a more simpler setup without a Vuex getter method in a v-for loop.
我知道如何在v-for循环中没有Vuex getter方法的情况下以更简单的设置执行此操作。 But how does this work when Vuex methods start entering the picture?
但是,当Vuex方法开始输入图片时,这如何工作? My code is below:
我的代码如下:
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.js 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')
}
}
})
Actually you're just creating a list of cards and they are going to be displayed inside a v-flex
without any further directive. 实际上,您只是在创建一张卡片列表,它们将在
v-flex
内显示,而无需任何其他指令。
To have a grid layout you should use the v-layout
plus the 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>
In this code I wrap the cards with a v-layout
with the wrap
attribute, that don't need writing a new v-layout
for the row. 在此代码中,我使用带有
wrap
属性的v-layout
包装卡片,不需要为该行编写新的v-layout
。
The for loop is moved to the v-flex
and I give the size 4 to the cell. 将for循环移至
v-flex
然后将大小4赋予单元格。
In the grid layout you have 12 box, if you need 3 you have to give a size of 4 (md4) each box. 在网格布局中,您有12个框,如果需要3个框,则每个框的大小必须为4(md4)。
If you need a much flexible layout you should put the v-layout
inside the loop and print a new every time you want a new row. 如果需要非常灵活的布局,则应将
v-layout
放在循环中,并在每次需要新行时打印新v-layout
。
Note 注意
I'm new to vuetify, so not sure if there is a better way to achieve this. 我是新来的,所以不确定是否有更好的方法可以实现这一目标。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.