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变量连接的字符串，与另一个字符串连接。

演示如下：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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""，把你的参数名键换成index，这样意思就更清楚了

Vue2动态输入名称

2 个答案: