Vue心得筆記(1) - | Vue陣列 push
版本:Vue.jsv2.6.10使用方式:
版本: Vue.js v2.6.10使用方式:
<html> <head> <script src="https://i1.wp.com/unpkg.com/vue/dist/vue.js"></script> </head> <body> <!-- your HTML code with Vue--> </body> </html>你發現了嗎? Vue對 array成員內容的異動是無響應的:
<div id="app"> array內容 -- {{ myArray }} <br> <input type="button" @click="myClick()">Click and view console</input> </div> <script> var vm = new Vue({ el: #app, data: { myArray: [1, 2, 3, 4, 5] }, methods: { myClick() { this.myArray[1] += 100 console.log(this.myArray, array內容改變了,但畫面沒有響應) }, } }); </script>加個watch觀察一下...確定靜悄悄:
watch: { myArray: { handler: function (vnew, vold) { console.log(vnew, watch it!); }, deep: true //drill down sensor } ...