Vue3 元素不显示

Question

I'm new to vue and i'm starting a project where i want to use a library https://github.com/tochoromero/vuejs-smart-table .

At the moment i have a simple app:

<template>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <v-table :data="users">
      <thead slot="head">
          <th>Name</th>
          <th>Age</th>
      </thead>
      <tbody slot="body" slot-scope="{displayData}">
          <tr v-for="row in displayData" :key="row.id">
            <td>{{ row.id }}</td>
            <td>{{ row.title }}</td>
          </tr>
      </tbody>
    </v-table>
  </template>

<script>
import users from './data/karaoke.json'

export default {
    name: 'users',
    data: () => ({
        users
    })
}
</script>

That should read the rows from my karaoke.json and display them as a table right? At least following the documentation here https://tochoromero.github.io/vuejs-smart-table/the-basics/#table .

What happens is that nothing is displayed on the page, is just the vue logo and the DOM for the vtable is empty. On the other side if i use vue chrome dev tools and inspect the page i can see that the vtable actually does have data in it, is just not being displayed.

Is there something I'm doing wrong here? The code is live in this repo https://github.com/jiwidi/lens_database

Answer 1

Looks like your markup is for the Vue 2 version of Smart Table. Check out the docs for the new Vue 3 compatible version (which is the package you're using). You need to use a <template> tag now to pass in slot props.

<v-table :data="users">
 <template #head>
   <thead slot="head">
     <th>Title</th>
     <th>Artist</th>
   </thead>
 </template>
 <template #body="{ rows }">
   <tbody>
     <tr v-for="row in rows" :key="row.id">
       <td>{{ row.id }}</td>
       <td>{{ row.title }}</td>
     </tr>
   </tbody>
 </template>
</v-table>