問題:給組件綁定了一個鼠標移入事件@mouseenter,達到圖片切換的效果,但不起作用
網上搜索,有人說@mouseenter.native應該有用,但是還是不起作用,那就不是鼠標事件的問題,應該是監控不到數值的變化。
解決:
這是因為Vue的自動渲染是基於對象的屬性變化的。比如頁面使用GoodsList進行渲染,如果GoodsList變化,或者其內部的任何子對象變化,都會Vue感知,從而從新渲染頁面。
然而,這一切有一個前提,那就是當你第一次渲染時,對象中有哪些屬性,Vue就只監視這些屬性,后來添加的屬性發生改變,是不會被監視到的。
而我們的goods對象中,本身是沒有selectedSku屬性的,是我們后來才添加進去的:
從JS代碼中可以看出來,查出data之后就賦值給了goodsList,這時goodsList中只有id,skus,subTitle,所有vue只會監控這三個數據的變化
原先的寫法
改造:將selectedSku賦值后再初始化goodsList