Javascript Vue 3从数组中提取数据并显示到表中

Question

大家好，祝大家度过愉快的一天。

我在Vue Js上设置了一个前端应用程序，与express.js api链接，连接到mysql数据库。我使用axios发送http请求。我能够从我的mysql数据库中抓取数据，并将其登录到前端系统中。然而，我正在努力从数组中提取数据并将其显示到表中。

这是桌子

<table class="table">
<thead>
<tr>
<th scope="col">#ID</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">email</th>
<th scope="col">DOB</th>
<th scope="col">Country Of Residence</th>
<th scope="col">Phone Number</th>
<th scope="col">Contact_Via Phone</th>
<th scope="col">Contact Via Email</th>
<th scope="col">Contact Via Mail</th>
<th scope="col">Sign up date</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" v-for="name in newData" :key="newData.id"></th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

这是我在创建页面时从数据库中获取数据的地方。

async created() {

try {
const getUserData = await axios.get('/api/getstudentdata',  {})
.then(getUserData => getUserData.data)
{
this.newData = JSON.parse(JSON.stringify(getUserData))
for( let i = 0; i < this.newData.length; i++) {
console.log(this.newData[i].Name)
}
}
}catch(error) {
console.log(error)
}
},

这里我添加了我的控制台日志和vue开发工具的内容。https://i.stack.imgur.com/CHzdK.jpg控制台日志:

roxy {0: {…}, 1: {…}, 2: {…}}
[[Handler]]: Object
[[Target]]: Array(3)
0: {ID: 50, Name: 'Bob', Surname: 'Bobbob', Email: '[e-mail]', DOB: '2000-07-15', …}
1: {ID: 51, Name: 'Tony', Surname: 'Scrub', Email: '[e-mail]', DOB: '2000-07-15', …}
2: {ID: 52, Name: 'Onemoreuser', Surname: 'te4st', Email: '[e-mail]', DOB: '2000-07-15', …}
length: 3
[[Prototype]]: Array(0)
[[IsRevoked]]: false

开发工具:

newData:Array[3]
0:Reactive
ID:50
Name:"Bob"
Surname:"Bobbob"
Email:"[e-mail]"
DOB:"2000-07-15"
Country_of_residence:"London"
Phonenumber:"0749432423"
contact_phone:"true"
contact_email:"true"
sign_up_date:"2022-07-19T14:06:19.000Z"
Timezone:"GMT+1"
1:Reactive
2:Reactive

更新!我设法显示所有的数据表，但我不能提取只是ID或名称…这是结果的照片。

https://i.stack.imgur.com/Q6lGC.jpg

Answer 1

首先，在v-for循环中，键必须是唯一的并且newData。id不是一个有效的关键字，我猜你想用这样的:

v-for="item in newData" :key="item.id"

其次，您在错误的地方使用了v-for，并且您没有使用值胡须来使用动态变量。试试这个:

<tr v-for="item in newData" :key="item.id">
<td>{{item.ID}}</td>
<td>{{item.Name}}</td>
<td>{{item.Surname}}</td>
...
</tr>