假設我有這個：
var app = new Vue({
el: '#app',
data: {
message: Math.random()
}
})
假設我想查看在 JS 控制臺中分配了什么值 data.message。我該怎么做？
從表面上看，這樣做似乎console.log(app.data.message)可以解決問題，但是當我嘗試這樣做時，我得到了一個Uncaught TypeError: Cannot read properties of undefined (reading 'message')錯誤。事實上，事實證明這app.data是未定義的。
那么我該怎么做呢？
這是這段代碼的 JS 小提琴：
https://jsfiddle.net/dfzun3by/4/
該代碼基于https://v2.vuejs.org/v2/guide/?redirect=true#Declarative-Rendering
作為這個問題的必然結果......在我現在負責的一些生產代碼中，我們沒有那個 - 我們在 *.vue 檔案中有更類似于這個的東西：
export default {
data() {
return {
message: Math.random()
}
}
}
我試圖console.log(app)在對應的頁面的 JS 控制臺中進行操作并出現Uncaught ReferenceError: app is not defined錯誤，那么我怎么能在生產代碼中做同樣的事情呢？
uj5u.com熱心網友回復：
聽起來 Vue.js Devtools 擴展可能對您有好處，它可以讓您查看 Vue 模板可用的所有變數的值（因此 中的所有內容data）。
https://devtools.vuejs.org/guide/installation.html
uj5u.com熱心網友回復：
您可以通過以下方式從 JS 控制臺訪問根實體：
document.getElementById('app').__vue__.message
要么
app.$options.data().message
要檢查 vue SFC，最好使用 Vue Devtools。
uj5u.com熱心網友回復：
您可以在執行 console.log(this.message) 時參考該值。如果您想在每次更改時記錄該值，您可以為訊息創建一個觀察者并在其中包含“console.log(this.message)”。
watch: {
message() {
console.log(this.message)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/451588.html
標籤：Vue.js
下一篇：如何將元素UI添加到Vue3