使用Vuejs的单个数组元素中的多个字段

Question

如何在Vue中的单个数组元素中的一行中添加两个或三个字段？ 的 Vue公司

Vehicles: [
   "BMW 100 1994",
   "Audi 300 2001",
   "Toyota 200 2000",
   "Mazda 104 2011",
   "Car 104 2014",
   "Car2 140 2015" ]

响应

axios.get('/api/manage/manage/vehicles').then(response => {
        this.vehicles = response.data.vehicles;
      })

数据库

Answer 1

如已注释，vue可以处理数组，或任何其他类型的数据。

但是要回答你的问题，假设来自服务器的 public function GetAllData($getTbl){ try{ $query = $this->dbconn->prepare("SELECT * FROM tblpackages P JOIN tblpackageincluded I ON P.PackageID = I.PackageID JOIN tblrates R ON P.PackageID = R.PackageID"); $query->execute(); if($query->rowCount() > 0){ while ($row = $query->fetch(PDO::FETCH_ASSOC)){ if($getTbl == 1){ echo "<tr>"; echo "<td>". $row['PackageID'] ."</td>"; echo "<td><a href='DeletePackages.php?id=". $row['PackageID'] ."'><i class='fas fa-trash-alt'></i></a></td>"; echo "<td><a href='EditPackages.php?id=". $row['PackageID'] ."'><i class='fas fa-edit'></i></a></td>"; echo "<td>". $row['PackageName'] ."</td>"; echo "<td>". $row['PackageCost'] ."</td>"; echo "<td>". $row['PackNote'] ."</td>"; echo '<td> <a href="?id='. $row['PackageID'] .'" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-eye"></i></a></td>'; echo '<td> <a href="?id='. $row['PackageID'] .'" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-eye"></i></a></td>'; echo "</tr>"; } else if($getTbl == 2){ echo "<tr>"; echo "<td>". $row['PackageIncID'] ."</td>"; echo "<td>". $row['PackIncluded'] ."</td>"; echo "</tr>"; } else if($getTbl == 3){ echo "<td>". $row['RateID'] ."</td>"; echo "<td>". $row['RateCount'] ."</td>"; echo "<td>". $row['CostPerHead'] ."</td>"; } } } } catch(PDOException $e){ echo $e->getMessage(); } } 数据是一个像这样的对象：

vehicles

要解决此问题，您可以这样做：

console.log(response.data.vehicles)
[
  {id: 1, make: 'BMW', model: '100', year: 1994},
  {id: 2, make: 'Audi', model: '1 Series M', year: 1994}
]

请参阅上面的代码片段以测试如何完成此操作：

＆＃13;

＆＃13;

axios.get('/api/manage/manage/vehicles').then(response => {
  this.vehicles = response.data.vehicles.map(car => `${car.make} ${car.model} ${car.year}`);
})

＆＃13;

＆＃13;

＆＃13;