Заполнение HTML-таблицы с помощью Vue 3


Заполнение HTML-таблицы с помощью Vue 3

02.12.2020 11:23:02 Просмотров 6 Источник

Я хочу заполнить таблицу данными, которые я получаю обратно из своего API. Теперь таблица не отображает никаких данных, но я извлекаю и вижу данные в моем console.log. Я неправильно вызываю данные в свою таблицу?

<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();
    })
  }
}
У вопроса есть решение - Посмотреть?

Ответы - Заполнение HTML-таблицы с помощью Vue 3 / Populate HTML table with Vue 3

Является ответом!
Dan

02.12.2020 11:29:29

Вам нужно вернуть любые данные, которые шаблон будет использовать с setup. Используйте объект, имена свойств которого совпадают с именами переменных шаблона:

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

Это эквивалентно:

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

02.12.2020 12:37:14

Почему бы вам не использовать директиву 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);
  }
}
...
}

Затем на уровне шаблона мы просматриваем все данные, записанные в listUser, используя директиву v-for :

  ...
  <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>
  ...
Помочь в развитии проекта:
Закрыть X