javascript - Vue2动态输入名称

Question

我正在尝试使用 Vue2 创建一些具有动态内容的输入标签。我尝试将它绑定(bind)到某个函数 :name="someFunction" 但这一次似乎不起作用。我需要 name 属性的格式

人[0]['name']
人[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>