我想使用動(dòng)態(tài)表單。和輸入名稱必須是數(shù)組。然后必須通過自動(dòng)添加數(shù)組編號(hào)以進(jìn)行發(fā)布。以下是我的代碼。<!doctype html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title></title> <!-- Scripts --> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"crossorigin="anonymous"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head><body> <form action="" method="post"> <div id="sample"> <button v-on:click="addNewItemForm">New Item</button> <div v-for="(item, index) in items"> <span style="coursor:pointer" v-on:click="deleteItemForm(index)">close</span> <div> <div>number({{index+1}})</div> <div> <label>Title:</label> <div> <input type="text" name="title[{{index}}]" required placeholder="here is title" v-model="item.title"> <p class="alert-warning">{{item.title}}</p> </div> </div> <div> <label>Detail:</label>
2 回答
忽然笑
TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超5個(gè)贊
首先，如果你想在 VueJS 中動(dòng)態(tài)設(shè)置一些屬性，請(qǐng)使用 .:
其次，即使您嘗試它也不會(huì)起作用，因?yàn)槟?您只有數(shù)組。在“data”中添加和數(shù)組，如果要從中設(shè)置名稱。:name="title[index]"titledataitemstitledetail
但是，我想您要生成具有相應(yīng)項(xiàng)的名稱和屬性。titledetail
因此，與其使用 this： 和 ，不如使用 this： 和 。name="detail[{{index}}]"name="detail[{{index}}]":name="item.title":name="item.detail"
并且還可以將某些內(nèi)容保存到并放入以查看更改，例如，如下所示：titledetailaddNewItemForm
addNewItemForm(){ this.items.push({
title:'title' + (this.items.length+1),
detail:'detail' + (this.items.length+1)
})
九州編程
TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊
您在這里面臨的問題是您希望動(dòng)態(tài)設(shè)置標(biāo)簽屬性。為了實(shí)現(xiàn)這一點(diǎn)，您需要 或 語法。最重要的是，html屬性始終是一個(gè)字符串。因此，記住這兩件事，您要尋找的是：:v-bind:
<input type="text" :name="`title[${index}]`"
required="" placeholder="here is title" v-model="item.title">P.S.：話雖如此，我會(huì)重新考慮使用這個(gè)名字，因?yàn)樗杏X你正在嘗試使用javascript對(duì)象，而它純粹是一個(gè)字符串。
- 2 回答
- 0 關(guān)注
- 125 瀏覽
添加回答
舉報(bào)
0/150
提交
取消