使用 Vue 3 填充 HTML table

Question

我想用 API 返回的数据填充 table。现在，table 没有显示任何数据，但我正在检索并查看 console.log 中的数据。我是否错误地将数据调用到我的 table？

<template>
  <div>
    <table>
      <tr>
        <th>S/N</th>
        <th>Username</th>
        <th>Email</th>
        <th>Group Role</th>
      </tr>
      <tr>
        <td><div></div></td>
        <td><div contenteditable>{{users}}</div></td>
        <td><div contenteditable>{{email}}</div></td>
        <td><div contenteditable>{{role}}</div></td>
      </tr>

    </table>
  </div>
</template>

import { onMounted, ref, reactive } from 'vue'

export default {
  name: 'manage-users-edit',

  setup(){
    const users = ref(null);
    const email = ref(null);
    const role = ref(null);
    const API_URL = '';

    async function getData() {
      const response = await fetch(API_URL);
      const data = await response.json();
      for(let i=0; i<=data.length; i++){
        users[i] = data[i].userName;
        email[i] = data[i].emailAddress;
        role[i] = data[i].userType;
        console.log('users', users[i]);
        console.log('email', email[i]);
        console.log('role', role[i]);
      }
    }

    onMounted(async () => {
      console.log('Dashboard mounted!')
      getData();
    })
  }
}

Answer 1

您需要 return 模板将使用的来自 setup 的任何数据。使用属性名称与模板变量名称匹配的对象：

setup() {
  ...
  return {
    users,
    email,
    role
  }
}

这相当于：

setup() {
  ...
  return {
    users: users,
    email: email,
    role: role
  }
}

Answer 2

为什么不使用 v-for 指令。我会为你做以下事情：

...
setup(){
    let listUser = [] // It is better to go on a let since we will reassign the API data to the variable
    const API_URL = '';

    async function getData() {
       const response = await fetch(API_URL);
       const data = await response.json();
       this.listUser = data
       console.log('data-users', this.listUser);
  }
}
...
}

然后在模板层面，我们使用v-for指令浏览listUser中记录的所有数据：

  ...
  <tr v-for="item in listUser">
    <td><div></div></td>
    <td><div contenteditable>{{item.users}}</div></td>
    <td><div contenteditable>{{item.email}}</div></td>
    <td><div contenteditable>{{item.role}}</div></td>
  </tr>
  ...

使用 Vue 3 填充 HTML table

Populate HTML table with Vue 3

html

javascript

vue.js

vue-component

vuejs3