Заполнение HTML-таблицы с помощью Vue 3
Я хочу заполнить таблицу данными, которые я получаю обратно из своего 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
Является ответом!
02.12.2020 11:29:29
Вам нужно вернуть любые данные, которые шаблон будет использовать с setup. Используйте объект, имена свойств которого совпадают с именами переменных шаблона:
setup() {
...
return {
users,
email,
role
}
}
Это эквивалентно:
setup() {
...
return {
users: users,
email: email,
role: role
}
}
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>
...
Помочь в развитии проекта: