Vuetify: [Bug Report] simple-table v-for broken

[fishchar]

Versions and Environment

Vuetify: 2.0.0-alpha.19
Vue: 2.6.10
Browsers: Chrome 73.0.3683.103
OS: Windows 10

Steps to reproduce

Create a simple-table

Expected Behavior

Loop through an array to create a simple-table

Actual Behavior

simple-table breaks on v-for, wanting the variable to be defined in the app

Reproduction Link

https://codepen.io/fishchar/pen/gJPvEW

Other comments

Error: Property or method "item" is not defined on the instance but referenced during render.
Issue: Cannot loop through items in the simple-table component.
Example (using Doc's codepen example): https://codepen.io/fishchar/pen/gJPvEW

[ibrahimBeladi]

Should I use alpha in production?
No.

Should I report bugs that I find in the alpha?
No. We will open up bug reporting once we move to beta.

What should I do now?
Just close this issue. If this bug persists after the beta release, then resubmit it.

[fishchar]

Wasn't sure if it should be reported or not. Take a deep breath.

[nekosaur]

Hm. This also seems to be a Vue bug? If you wrap the content in <template v-slot:default> it works in the codepen.

[fishchar]

Interesting find. So is there a safe place to report alpha bugs or does it not really matter? I was just messing around checking Vuetify out.

[wobsoriano]

I am using the CDN version and v-simple-table renders a string inside a table when you inspect it in devtools.

Using @nekosaur 's fix did it.

Wrap the contents of v-simple-table inside a <template v-slot:default>.

<v-simple-table>
  <template v-slot:default>
    <thead>
      <tr>
        <th class="text-left">Name</th>
        <th class="text-left">Calories</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in desserts" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
      </tr>
    </tbody>
  </template>
</v-simple-table>