如何显示数据 vue js + axios 中的特定列？答案

【问题标题】：How do I display a specific column from a data vue js + axios?如何显示数据 vue js + axios 中的特定列？
【发布时间】：2024-04-29 08:50:02
【问题描述】：

好的，我是新手，还没有掌握词典。这是我正在尝试做的事情：

我已使用 axios 和 (f12) - 网络 - 预览成功地从我的 SQL 中读取数据。它显示：

成功推送为数组。

但是在 vue 中，当我尝试显示它时。它显示：作为

[ { "COUNT(`char_id`)": "1" } ]

如何只显示“1”？

我的 vue（内部）：

{{onlineUsers}}

（内部脚本）

data:() => ({
    onlineUsers: [],
)},
created(){
    this.onlineUsersFunction();
},
methods: {
    onlineUsersFunction: function () {
      axios.post(url, { switchCase: 2 }).then((response) => {
        this.onlineUsers = response.data;
      });
    }
}

在我的 crud.php 中

$switchCase = (isset($_POST['switchCase'])) ? $_POST['switchCase'] : '';

switch($switchCase){
    case 1: //Select
        $query = "SELECT * FROM login";
        $stmt = $conn->prepare($query);
        $stmt->execute();
        $data=$stmt->fetchAll(PDO::FETCH_ASSOC);
        break;
    case 2:
        $query = "SELECT COUNT(`char_id`) FROM `char` WHERE `online` = 1;";
        $stmt = $conn->prepare($query);
        $stmt->execute();
        $data=$stmt->fetchAll(PDO::FETCH_ASSOC);
        break;
        
}
print json_encode($data, JSON_UNESCAPED_UNICODE);
$conn = NULL;

【问题讨论】：

{{ onlineUsers[0]["COUNT(char_id)"] }}
不是真正的vue问题，将查询更改为SELECT COUNT(`char_id`) as users_online FROM..后应该使用fetchColumn

标签： javascript php vue.js pdo

【解决方案1】：

首先，您的计数查询仅返回一行，因此无需使用fetchAll 将其包装在一个数组中。试试这样的方法

$query = "SELECT COUNT(`char_id`) FROM `char` WHERE `online` = 1;";
$data = ["count" => $conn->query($query)->fetchColumn()];

然后在Vue中，只需使用

{{ onlineUsers.count }}

您还应该将onlineUsers 设置为初始化时的对象

data: () => ({
  onlineUsers: {},
)},

【讨论】：