Vue2 動態輸入名稱

Question

使用 Vue2 我試圖創建一些具有動態內容的輸入標簽。 我嘗試將它綁定到某個函數:name="someFunction"但這在這種情況下似乎不起作用。 我需要 name 屬性的格式

people[0]['name']
people[1]['name']

數字值是人們循環的關鍵值。 我通常根據存儲的模型創建 ajax/axios 請求，但有時該方法是不可能的。

這是我目前所擁有的示例片段：

 new Vue({ el : '#example', data : { people : [ { name : 'Tom', age : 12 }, { name : 'Susan', age : 18 }, ] } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="example"> <div v-for="(person,key) in people"> <input type="text" name="people[key]['name']" :value="person.name"> <!-- The name should be dynamic people[0]['name'] --> <!-- and people[1]['name'] --> </div> </div>

非常感謝提前

Answer 1

您可以使用v-bind （或其簡寫: ）並將name變成:name 。 這樣，它的值可以是任何 JavaScript 表達式。

示例：

:name="'people[' + key + '][\'name\']'"

請注意，該屬性的值實際上是 JavaScript 表達式：

       'people[' + key + '][\'name\']'

這是一個與key變量連接的字符串，與另一個字符串連接。

演示如下：

 new Vue({ el : '#example', data : { people : [ { name : 'Tom', age : 12 }, { name : 'Susan', age : 18 }, ] } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="example"> <div v-for="(person,key) in people"> <input type="text" :name="'people[' + key + '][\\'name\\']'" :value="person.name"> <!-- The name should be dynamic people[0]['name'] --> <!-- and people[1]['name'] --> </div> </div>

Answer 2

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="example"> <div v-for="(person,index) in people" :key="index"> <input type="text" :name="`people[${index}][${person.name}]`" :value="person.name"> <!-- The name should be dynamic people[0]['name'] --> <!-- and people[1]['name'] --> </div> </div>

我認為你必須添加綁定鍵 ":key="your_index"" 並用索引替換你的參數名稱鍵，這樣意思就更清楚了