时间戳

首页 > 解决方案 > 如何显示数据 vue js + axios 中的特定列？

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

问题描述

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

我已经使用 axios 和 (f12) - network - preview 成功地从我的 SQL 中读取了数据。表明：

在此处输入图像描述

成功推送为数组。

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

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

如何只显示“1”？

我的Vue（内部）：

{{在线用户}}

（脚本内）

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;

标签： javascriptphpvue.jspdo

解决方案

首先，您的 count 查询仅返回一行，因此无需使用fetchAll. 尝试这样的事情

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

然后在Vue中，只需使用

{{ onlineUsers.count }}

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

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

推荐阅读