Я создаю простую панель мониторинга, используя Vue 3 с синтаксисом . У меня есть две таблицы (Пользователи и Продукты) и кнопки для переключения между ними. Хотя я вижу ответ JSON на вкладке «Сеть» моего браузера, таблицы остаются пустыми или, похоже, не реагируют на изменение данных.
Я использую ref для своих массивов данных и вызываю API внутри onMounted. Есть ли в моей реализации состояние гонки или проблема с реактивностью?
Вот мой полный компонент:
import { ref, onMounted } from 'vue'
import axios from 'axios'
const users = ref([])
const products = ref([])
const activeTable = ref('users')
// Fetching users from local Node.js API
const getUsers = async () => {
try {
const response = await axios.get('http://localhost:3000/users')
users.value = response.data
} catch (error) {
console.error("User fetch error:", error)
}
}
// Fetching products
const getProducts = async () => {
try {
const response = await axios.get('http://localhost:3000/products')
products.value = response.data
} catch (error) {
console.error("Product fetch error:", error)
}
}
const showUsers = () => { activeTable.value = 'users' }
const showProducts = () => { activeTable.value = 'products' }
onMounted(() => {
getUsers()
getProducts()
})
Data List
Users
Products
Users
ID
Username
Email
{{ user.id }}
{{ user.username }}
{{ user.email }}
Products
ID
Name
Price
{{ product.id }}
{{ product.name }}
{{ product.price }}
table {
border-collapse: collapse;
width: 500px;
margin-top: 20px;
}
th, td {
border: 1px solid black;
padding: 10px;
}
The problem:Even though the console shows no errors and the API works, the v-for doesn't seem to render the rows. Should I be using reactive() instead of ref() for arrays, or is the v-if logic on the parent div interfering with the lifecycle of the table?
