後臺向vue頁面傳值

//向vue頁面傳值
//步驟1：
// 現在js檔案中規定呼叫的後臺介面查詢車輛狀態詳細
export function listCar(query) {
return request({
url: '/mqtts/start/liststat',
method: 'get',
params: query
})
//步驟2：
//在vue頁面的script下引入方法 listCar
import { listCar } from "@/api/system/start.js";

//步驟3：
//呼叫方法
onMounted(()=>{
getListCar()
})

//步驟4：
//申明使用到的變數；let修飾的動態可變引數，const修飾的靜態引數
let xingshi = ref(['']);
let tingche = ref(['']);
let lixian = ref(['']);
const loading = ref(true);
//獲取後臺資料解析，應用
function getListCar() {
loading.value = true;
listCar().then(response => {
const rows = response.rows;
for (const row of rows) {
let carZhuangtai = row['carZhuangtai'];
let num = row['num'];
// 在這裡對獲取到的值進行進一步處理
if(carZhuangtai=='1'){console.log(1);tingche.value=num}

if(carZhuangtai=='2'){console.log(2);lixian.value=num}

if(carZhuangtai=='0'){console.log(0); xingshi.value = num;}
}
});
}

//步驟5：
//將值傳到頁面{{ xingshi }}
<span ><el-tag class="spn" size="small">行駛:{{ xingshi }}</el-tag></span>
<span ><el-tag class="spn" size="small">停車:{{ tingche }}</el-tag></span>
<span ><el-tag class="spn" size="small">總數:</el-tag></span>
</p>
<p>
<span ><el-tag class="spn" size="small">離線:{{lixian}}</el-tag></span>

獲取的資料樣式；解析方法