1.問題
at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-6900a511","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/first1.vue (app.js:3200), <anonymous>:17:50)
報錯就是這個樣子的,但是數據其實是渲染出來了,這個問題是因爲一開始渲染的時候數據還沒來,等數據來了之後又重新渲染了一遍,所以我們既看到了數據有看到了報錯。
我一開始想的是mounted裏接收一下,在剛開始掛載的時候就差處理這個數據,但是實際上是拿不到的。
上一行是能拿到的,但是下面就拿不到了,搜了一下,貌似上面也是不應該拿到了,但是問題到這裏差不多就能想到就是時間先後的問題,自然而然的想到了延時器。
2.1延時器
在元素上面寫一個v-if判斷一下
但是有個問題,這個辦法雖然不會報錯了,也會顯示,但是會造成閃一下的畫面,因爲一開始渲染了,不顯示,0.5秒以後渲染顯示頁面,頁面就會忽然出現,也想過把時間改短一點,人眼分辨不出來的地步,但是畢竟不是很正統的辦法。
2.1監聽辦法
後來又搜了搜有監聽的辦法,當然這個也需要一個判斷
打印出來也有效果,刷新之後也不報錯
但是這個辦法也有個問題,就是我們開發肯定是時不時在改代碼的,vue裏肯定都是熱更新,改了代碼之後自動更新,問題就來了,這個監聽在你改了代碼之後並不會出發,畢竟first1data這個數據沒有更改,然後就又出現問題,因爲v-fi那個更改是在監聽裏的,這下好了,模塊直接隱藏掉了,雖然一開始不會報錯,但是對於開發是不友好的
2.3v-fi
v-if簡單粗暴,如果需要渲染就直接在上面寫一個v-if
解決了。。。。
2.4最後
不過我總感覺應該還有別的辦法,但是還沒找到,如果哪位看官有找到更合適的辦法,麻煩告訴我下,謝謝