Vue的@mouseenter事件不起作用


問題:給組件綁定了一個鼠標移入事件@mouseenter,達到圖片切換的效果,但不起作用

 

 

 

 網上搜索,有人說@mouseenter.native應該有用,但是還是不起作用,那就不是鼠標事件的問題,應該是監控不到數值的變化。

解決:

這是因為Vue的自動渲染是基於對象的屬性變化的。比如頁面使用GoodsList進行渲染,如果GoodsList變化,或者其內部的任何子對象變化,都會Vue感知,從而從新渲染頁面。

然而,這一切有一個前提,那就是當你第一次渲染時,對象中有哪些屬性,Vue就只監視這些屬性,后來添加的屬性發生改變,是不會被監視到的。

而我們的goods對象中,本身是沒有selectedSku屬性的,是我們后來才添加進去的:

從JS代碼中可以看出來,查出data之后就賦值給了goodsList,這時goodsList中只有id,skus,subTitle,所有vue只會監控這三個數據的變化

原先的寫法

 

 

 改造:將selectedSku賦值后再初始化goodsList

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM