關(guān)于console.log打印結(jié)果是?[object?Object]的解決
更新時間：2022年04月30日 10:06:25 作者：~say?hello
這篇文章主要介紹了關(guān)于console.log打印結(jié)果是?[object?Object]的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
console.log打印結(jié)果是 [object Object]
問題
之前使用的+ 進(jìn)行連接，如： console.log("前端參數(shù)param是："+self.filters.ip)
顯示結(jié)果是： [object Object]
解決方案
在VUE文件中，打印拼接的原始數(shù)據(jù)用 ， 隔開，如
console.log("前端參數(shù)param是："，self.filters.ip)結(jié)果即可正常顯示：
對object.object和object[object]的認(rèn)識
發(fā)現(xiàn)
在做項目的過程中偶然發(fā)現(xiàn)了使用object[object]和object.object得到的結(jié)果結(jié)果是一樣的，這讓我感覺到很訝異，畢竟以前使用object[object]都是在數(shù)組中使用的，并沒有這樣使用過.
案例
const lineChartData = {
newVisitis: {
expectedData: ['2020-12-1', '2020-12-2', '2020-12-3', '2020-12-4', '2020-12-5', '2020-12-6', '2020-12-7'], //每日注冊人數(shù)日期
actualData: [120, 82, 91, 154, 162, 140, 145] //每日注冊人數(shù)
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
如上，若我們使用newVisitis內(nèi)的對象，那么我們肯定是通過this.lineChartData.newVisitis這樣獲取的。
但是此時我們通過**this.lineChartData[newVisitis]**也可以獲取到
代碼如下：
methods: {
handleSetLineChartData(type) {
console.log(type)
console.log( lineChartData[type]," lineChartData[purchases]")
console.log( lineChartData.purchases," lineChartData.purchases")
this.lineChartData = lineChartData[type]
}
}
結(jié)果如下：
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
當(dāng)用戶在當(dāng)前站點停留時間比較長，中途站點進(jìn)行升級更新之后，用戶如果不刷新頁面就任然停留在舊的頁面里，如何讓用戶收到一個提示，引導(dǎo)用戶進(jìn)行更新操作呢？下面給大家介紹如何站點更新如何在生產(chǎn)環(huán)境提示用戶更新，進(jìn)行頁面刷新操作，核心原理其實很簡單2023-03-03
Vue-Router實現(xiàn)組件間跳轉(zhuǎn)的三種方法
這篇文章主要為大家詳細(xì)介紹了Vue-Router來實現(xiàn)組件間跳轉(zhuǎn)的三種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children詳解
element-ui 目前基本成為前端pc網(wǎng)頁端標(biāo)準(zhǔn)ui框架,下面這篇文章主要給大家介紹了關(guān)于elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
基于node+vue實現(xiàn)簡單的WebSocket聊天功能
最近學(xué)習(xí)了一下websocket的即時通信，感覺非常的強(qiáng)大，這里我用node啟動了一個服務(wù)進(jìn)行websocket鏈接，然后再vue的view里面進(jìn)行了鏈接，進(jìn)行通信，廢話不多說，直接上代碼吧2020-02-02
本篇文章主要介紹了詳解Vue生命周期的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應(yīng)用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下2022-11-11
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12
vue3使用element-plus中el-table組件報錯關(guān)鍵字'emitsOptions'與&
這篇文章主要給大家介紹了關(guān)于vue3使用element-plus中el-table組件報錯關(guān)鍵字'emitsOptions'與'insertBefore'的相關(guān)資料,文中將解決方法介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-06-06
這篇文章主要介紹了vue-cli腳手架初始化項目各個文件夾用途,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01