當一個陣列是原始結構，例：[1,2,3,4,5]
若新增一個項目進去時，一般在html上，v-model會直接綁定那個項目的值，如以下程式

<td v-for="item in list">
      <input type="text" v-model="item" />
</td>

但這樣，在新增項目的input上改變值時，會沒辦法binding到vue值。

這時解決的方式如下，將程式加入index，v-model直接綁定到陣列的索引值，這樣就能改變vue的值

<td v-for="(item, index) in list">
      <input type="text" v-model="list[index]" />
</td>

PS. 若是陣列裡面是物件的結構，使用v-model可直接綁定物件的key值
例：[
 {
    name: "中文",
    value: 1
 },
{
    name: "英文",
    value: 2
 },
{
    name: "日文",
    value: 3
 },
]
<td v-for="item in list">
      <input type="text" v-model="item.name" />
</td>

程式碼上色

https://highlightjs.org/

Vue
https://github.com/highlightjs/vue-plugin

中文
https://fenxianglu.cn/highlight.html?theme=atom-one-light

 

相關參考
https://vuejs.org/v2/guide/

1.
加入vue.js

2.
先"包裹"一層 要用到Vue的元素
個人覺得有點想原本習慣的<!--Content-->
但這次只要放入標籤(我是用Id)
像是範例為 vMain   
然後宣告js 物件 我是取名也叫做 vMain 不知道會不會有撞名問題
所以我的el: 就是 #vMain

3.
再來加入變數
{{Creat_Date}}  兩個括號 桃紅色的
如果data 這個物件裡面有一個叫Creat_Date 的資料他就會被放進去

這樣第一個app 就完成了。

其中 Vue 裡面包含幾樣東西 
el >> 標示 這個Vue 的標籤
data >> 裡面存放的資料變數
created >> 生命週期的
methods>>包含各種功能function

這次的列表頁需要用到以前用的 List Item 跟 Pager
對應到vue 會使用到
v-for for 迴圈
v-for" item in dt  ">> dt 為data中的一個array陣列 (此範例中 為PD 中的 DT)
item 則是在這裡的區域變數

有些要顯示有些要隱藏
v-if
v-if" pager.currentPage  > 1" pager 為data 中的一個物件 裡面有包含 currentPage 的變數

還有要傳ajax 回去要資料
所以要在 vue 中的 methods 建立 function
已這次的例子 getList就是目前的function 可以用到一些 data 裡面的資料
回傳成功之後資料也可以回寫在data上面

以及之前會在各種事件的觸發 
@click 觸發點擊事件
在標籤上加上 @click 可以觸發 類似 onclick 的事件 
但是是調用methods裡面function

日期格式
由於之前的套件PD 回傳的日期資料會是 yyyy-MM-ddTHH:mm:ss 這樣的格式
所以使用了 map  將 dt 裡面的日期 轉換成為我要的格式

v.dt.map(function (obj) {
      var rObj = obj;
      rObj["Create_Date"] = $.datepicker.formatDate('yy-mm-dd', new Date(obj["Create_Date"]));
      return rObj;
});