VueJS实现下拉选框值传递至输入框name并动态生成输入框

我来帮你搞定这个问题！根据你的需求，我们只需要在现有代码基础上添加下拉选框的绑定逻辑，以及点击按钮时的赋值和重置操作就行。下面是完整的实现示例：

完整代码示例 #

<div id="app">
  <!-- 下拉选框，绑定选中值到selectedName -->
  <select v-model="selectedName">
    <option value="">请选择输入框类型</option>
    <option value="username">用户名</option>
    <option value="email">邮箱</option>
    <option value="phone">手机号</option>
  </select>
  <!-- 添加按钮，点击时创建新输入框 -->
  <button @click="addRow">添加输入框</button>

  <ul>
    <li v-for="(input, index) in inputs" :key="index">
      <!-- 输入框的name属性绑定到input对象的name字段 -->
      <input type="text" v-model="input.one" :name="input.name">
      <button @click="deleteRow(index)">Delete</button>
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      inputs: [], // 存储输入框数组
      selectedName: '' // 存储下拉选框的选中值
    }
  },
  methods: {
    addRow() {
      // 先判断是否选中了下拉选项，避免创建空name的输入框
      if (this.selectedName) {
        // 向inputs数组中添加新的输入框对象，包含v-model的one字段和name字段
        this.inputs.push({
          one: '',
          name: this.selectedName
        });
        // 重置下拉选框的值
        this.selectedName = '';
      }
    },
    deleteRow(index) {
      // 删除指定索引的输入框
      this.inputs.splice(index, 1);
    }
  }
})
</script>

关键逻辑解释 #

• 下拉选框绑定：通过v-model="selectedName"把下拉选框的选中值实时同步到Vue实例的selectedName属性中，这样我们就能随时获取到用户选择的值。
• 创建输入框：点击“添加输入框”按钮时，把selectedName作为新输入框的name属性值，和one字段一起添加到inputs数组里。
• 重置下拉值：每次添加完成后，把selectedName重置为空字符串，这样下拉选框就会回到默认的“请选择输入框类型”选项。
• 输入框name绑定：用:name="input.name"（动态绑定语法）把输入框的name属性和数组中对应对象的name字段关联起来，确保每个新创建的输入框都有正确的name值。

这样就能完美实现你想要的效果啦——每次选择下拉选项，点击按钮就能创建对应name属性的输入框，而且按钮点击后下拉选框会自动重置~

内容的提问来源于stack exchange，提问作者archvist