Re: [問題] vue.js 的class的切換

看板Ajax作者BugofBook (愛書蟲)時間4年前 (2020/08/30 10:58)推噓2(3推 1噓 3→)

留言7則, 5人參與討論串2/2 (看更多)

※ 引述《clerkhsiao (火球小子)》之銘言： : 因為工作上的需求, 最近開始自學 vue.js, 但遇上個問題一直解決不了, 所以想請問各位先進。 : 程式說明： : 以下的的小程式有搭配bootstrap, 按下新增鈕之後會新增資料, 每一筆新增的資料會連帶產生一個年代的的model, 在生日的年的input上click之後, 會跳出生日的年代的model, 在特定的年代上click之後, 圓圈會切換成被打勾的圖案 ( 透過切換fa_circle和fa_check_circle這兩個class的方式來產生效果 )。 : 問題說明： : 按下圓圈之後沒有切換成打勾的圖案, 我有用console.log把birthday_year這個陣列的值印出來, 按下的年代的值是有改變的( true 和 false的切換 ), 請問為什麼值有切換但效果卻沒出來呢? : https://i.imgur.com/tg2yXhs.jpg

: https://i.imgur.com/w5ofdsf.jpg

: 程式： : https://jsfiddle.net/clerkhsiao/w6puaxtn/16/ https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 這是Vue官網上的說明，雖然是英文版但可以切換成簡中。簡單來說，如果你是直接修改一個物件內的值，vue是不會知道你有修改的（在javascript內，陣列也算是一種物件）。這是因為Vue在比較前後屬性的差異時會使用到Javascript的call by sharing特性（請自行google，本文不會多說明）。以下是vue的二種解決方法，我也會介紹另一種問題比較少的解決方法 1.this.$set() Vue.set() 上面的二個方法都是指同一個，根據不同的呼叫點使用。這個方法簡單來說是告訴vue使用者要修改某一物件/陣列中的某一個值，這樣Vue就會自動幫你處理物件/陣列和更新的問題，但有一個小問題，當你要處理的物件/陣列本身是多維時，使用set方法有時不會出現你想要的結果。 2.this.$forceUpdate() Vue.forceUpdate() 這個方法簡單來說就是告訴vue，請幫我檢查"組件中所有屬性"，同時處理更新，因為這個方法是檢查所有屬性，所以會很吃效能，通常在一個組件中使用的一次就是極限了。但因為這個方法很方便，通常都會濫用到拖慢效能。官網也不太建議使用這個方法（那你還開這個API?） https://vuejs.org/v2/guide/components-edge-cases.html#Controlling-Updates 3.React中的解決方法因為React中很強調不變性，在修改物件/陣列時不會直接修改內部的值，而是先產生一個新的物件/陣列，再把這個新物件/陣列指定回本來的物件/陣列。以下是react風格的使用方法 let newList = [...this.birthday_year].map((year,fs_circle,..otherts ) => { if (year === 1953) { return ({year,fs_circle: !fs_circle,...others}) } else { return ({year,fs_circle,...others}) } }) this.birthday_year = newList 一般來說我會比較建議使用React風格的解決方法，因為只要寫的出來就好，之後要增加功能也方法，但你也可以使用Vue的方法就是了，對react和vue都會的小弟我說，vue的方法真是太多餘了. -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.228.41.124 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1598756322.A.1AA.html