JSON data and Vuetify cards

Question

I've had no problem binding data to a vuetify data table like so;

<template>
  <v-data-table
    :items="items"
    :items-per-page="5"
    class="elevation-1"
  >
    <template v-slot:item="props">
        <tr>
            <td>{{ props.item.title }}</td>
            <td>{{ props.item.content }}</td>
        </tr>
    </template>
  </v-data-table>
</template>

However, when attempting to do the same thing with a Vuetify card, I get nothing:

<template>
    <v-card :items="items">
      <template  v-slot:item="props">
        <v-card-title>{{ props.item.title }}</v-card-title>
        <v-card-text>{{ props.item.content }}</v-card-text>
      </template>
    </v-card>
</template>

Any help is appreciated.

EDIT:

I have updated with my latest attempt below as per responses.

Script:

<script>
import axios from 'axios'
export default {
  components: {},
  computed: {},
  data() {
    return {
      items: []
    }
  },
  mounted() {
      this.loadItems(); 
  },
  methods: {
    loadItems() {

      // Init variables
      var self = this
      var app_id = "ID";
      var app_key = "KEY";
      this.items = []
      axios.get(
        "https://api.airtable.com/v0/"+app_id+"/Content",
        { 
          headers: { Authorization: "Bearer "+app_key } 
        }
      ).then(function(response){
        self.items = response.data.records.map((item)=>{
          return {
              id: item.id,
              ...item.fields
          }
        })
      }).catch(function(error){
        console.log(error)
      })
    }
  }
}
</script>

I get Cannot use v-for on stateful component root element because it renders multiple elements.. I have tried putting it into a parent div or template tag and it still doesn't render.

Vuetifys Card component doesn't offer the attribute items nor an item slot. Check out the API doc of Data Table and Card — Uchendu

Billal Begueradj Billal Begueradj · Accepted Answer · 2020-04-09T07:21:12

<v-card> component do not accept a prop with such a name (items). This means you will need to hard code the iterations by yourself (Vue.js list rendering documentation). Something like this:

<v-card
  v-for="item in items" :key="item.title"
  class="mx-auto"
  width="400"
>  
    <v-card-title> {{ item.title }}</v-card-title>  
    <v-card-text> {{ item.content }} </v-card-text>
</v-card>

This supposes you have items data (just an example):

data() {
    return {
      items: [
        {
          title: 'card 1',
          content: 'this is the content of card 1'
        },
        {
          title: 'card 2',
          content: 'this is the content of card 2'
        }
      ]
    }
  },

And you will get something like this:

Update:

Following your comment, I can guess the issue you are facing is in the template part of your component. So If we take the example I shared above, this is one way to prevent the error you got:

<template>
  <v-container>
    <v-row v-for="item in items" :key="item.title">
      <v-col>
        <v-card
          class="mx-auto"
          width="400"
        >  
          <v-card-title> {{ item.title }}</v-card-title>  
          <v-card-text> {{ item.content }} </v-card-text>
        </v-card>
      </v-col>
    </v-row>
   </v-container>
</v-template>

Note that I moved the v-for to the outer v-row component so that I can draw one v-card per row.

JSON data and Vuetify cards

2 Answers