UWInfo Blog
發表新文章
[Join] | [忘記密碼] | [Login]
搜尋

搜尋意見
文章分類-nelson
[所有文章分類]
  • ASP.NET (0)
  • ASP.NET2.0 (0)
  • ASP.NET4.0 (0)
  • JavaScript (2)
  • jQuery (0)
  • FireFox (0)
  • UW系統設定 (0)
  • SQL (0)
  • SQL 2008 (0)
  • mirror (0)
  • SVN (0)
  • IE (1)
  • IIS (0)
  • IIS6 (0)
  • 閒聊 (0)
  • W3C (2)
  • 作業系統 (2)
  • C# (0)
  • CSS (7)
  • FileServer (0)
  • HTML 5 (1)
  • CKEditor (0)
  • UW.dll (0)
  • Visual Studio (0)
  • Browser (3)
  • SEO (0)
  • Google Apps (0)
  • 網站輔助系統 (0)
  • DNS (0)
  • SMTP (0)
  • 網管 (1)
  • 社群API (0)
  • SSL (0)
  • App_Inventor (0)
  • URLRewrite (0)
  • 開發工具 (0)
  • JSON (0)
  • Excel2007 (0)
  • 試題 (0)
  • LINQ (0)
  • bootstrap (0)
  • Vue (1)
  • IIS7 (0)
  • foodpanda (0)
  • 編碼 (0)
  • 資安 (0)
  • Sourcetree (0)
  • MAUI (0)
  • CMD (1)
  • my sql (0)
所有文章分類
[nelson的分類]
  • ASP.NET (48)
  • ASP.NET2.0 (15)
  • ASP.NET4.0 (34)
  • JavaScript (49)
  • jQuery (26)
  • FireFox (4)
  • UW系統設定 (3)
  • SQL (39)
  • SQL 2008 (25)
  • mirror (4)
  • SVN (4)
  • IE (9)
  • IIS (20)
  • IIS6 (1)
  • 閒聊 (7)
  • W3C (6)
  • 作業系統 (9)
  • C# (24)
  • CSS (12)
  • FileServer (1)
  • HTML 5 (11)
  • CKEditor (3)
  • UW.dll (13)
  • Visual Studio (16)
  • Browser (8)
  • SEO (1)
  • Google Apps (3)
  • 網站輔助系統 (4)
  • DNS (5)
  • SMTP (4)
  • 網管 (11)
  • 社群API (3)
  • SSL (4)
  • App_Inventor (1)
  • URLRewrite (2)
  • 開發工具 (6)
  • JSON (1)
  • Excel2007 (1)
  • 試題 (3)
  • LINQ (1)
  • bootstrap (0)
  • Vue (3)
  • IIS7 (3)
  • foodpanda (2)
  • 編碼 (2)
  • 資安 (3)
  • Sourcetree (1)
  • MAUI (1)
  • CMD (1)
  • my sql (1)
最新回應
標籤
  • SU
  • openExtern
  • SQL
  • web.
  • -3089
  • 22
  • [U2]
  • 考試
  • Needs Lock
  • 8
  • UW
  • C#
  • IE11
  • 欄位
  • aspnet ORD
  • 100
  • IIS7
  • IP
  • 916
  • c
  • Find
  • -9692
  • load
  • 56
  • 34
  • 權限
  • json
  • for
  • 1124
  • 380
  • Ubuntu
  • C212112112
  • aspjpeg
  • ad
  • [t]
  • User
  • nsftw
  • query
  • Chrome
  • 878
  • 1
  • Image
  • orm
  • sw
  • UWInfo
  • Doug
  • intlTelInp
  • date
  • JsonConver
  • EN
用vue綁定陣列中項目的值的方式
當一個陣列是原始結構,例:[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>

nelson, 2024/5/17 上午 07:49:13
文章分類:JavaScript|Vue
nelson 已閱讀.
意見
No Data.
Comment:
*Nickname:
E-mail:
Blog URL:
  • *意見內容
  • 預覽
#Nickname#
2024/5/17 上午 07:49:13
#CommentContent#
*請輸入驗證碼: 看不懂,換張圖
 
~ Uwinfo ~