※ 引述《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://webptt.com/cn.aspx?n=bbs/Ajax/M.1598756322.A.1AA.html