Javascript 使用VueJS将选择选项值传递给输入字段

我试图从选择选项中获取值，并将其传递给输入字段名，以便在单击按钮时创建不同的输入字段

到目前为止，我有一个输入字段数组，但我不确定如何获取选择选项值并在输入名称字段中输出它，每次单击按钮都会重置它

加价

JSFiddle-

---

将select input的值绑定到inputType后，只需使用inputType变量即可

  <div id="app">

<ul>
  <li v-for="(input, index) in inputs">
    <input v-bind:type="input.type">
    <button @click="deleteRow(index)">Delete</button>
  </li>
</ul>

<select v-model="inputType">
  <option selected="selected">Select a field to add</option>
  <option value="text">Text</option>
  <option value="file">File</option>
  <option value="email">email</option>
</select>
<button @click="addRow">Add row</button>

---

由于已将select input的值绑定到inputType，所以只需使用inputType变量

  <div id="app">

<ul>
  <li v-for="(input, index) in inputs">
    <input v-bind:type="input.type">
    <button @click="deleteRow(index)">Delete</button>
  </li>
</ul>

<select v-model="inputType">
  <option selected="selected">Select a field to add</option>
  <option value="text">Text</option>
  <option value="file">File</option>
  <option value="email">email</option>
</select>
<button @click="addRow">Add row</button>

---

我不知道你想完成什么，所以我只是在这里猜测一下

const app=新的Vue{ el:“应用程序”， 数据：{ 输入：[]， 选择： }, 方法：{ 添加行选择{ 这是推{ 类型：选择， 一: } }, 删除行索引{ 这个.inputs.index，1 } } } JS-Bin 删去 {{input.type} 选择要添加的字段 文本 文件 电子邮件 添加行

---

我不知道你想完成什么，所以我只是在这里猜测一下

const app=新的Vue{ el:“应用程序”， 数据：{ 输入：[]， 选择： }, 方法：{ 添加行选择{ 这是推{ 类型：选择， 一: } }, 删除行索引{ 这个.inputs.index，1 } } } JS-Bin 删去 {{input.type} 选择要添加的字段 文本 文件 电子邮件 添加行

---

你能用小提琴再现你的尝试吗？你可以观察inputType的变化并做出反应。这就是你抓取所选内容的方式。单击后，只需执行添加输入的操作，然后将inputType设置为null。另外，在你的数据中定义它。你能用小提琴再现你的尝试吗？你可以观察输入类型的变化并对此作出反应。这就是你抓取所选内容的方式。单击后，只需执行添加输入的操作，然后将inputType设置为null。另外，在您的数据中定义它。啊哈，正确，但这会将选项值绑定到输入值，而不是字段的name属性。我希望将选项值inputType绑定到输入html标记的name属性，例如I Understand我可能需要一个v-bind:name。我用我认为正确的方法编辑了我的答案，我已经试过了，它正在工作，添加的输入将是所选的类型。您将输入v-bind的类型绑定到：type.Aha正确，但这会将选项值绑定到输入值，而不是字段的name属性。我希望将选项值inputType绑定到输入html标记的name属性，例如我在stand下我可能需要一个v-bind:name。我已使用我认为正确的方法编辑了我的答案，我已经试过了，它正在工作，添加的输入将是所选的类型。您可以绑定输入的类型v-bind:type。

  <div id="app">

<ul>
  <li v-for="(input, index) in inputs">
    <input v-bind:type="input.type">
    <button @click="deleteRow(index)">Delete</button>
  </li>
</ul>

<select v-model="inputType">
  <option selected="selected">Select a field to add</option>
  <option value="text">Text</option>
  <option value="file">File</option>
  <option value="email">email</option>
</select>
<button @click="addRow">Add row</button>

const app = new Vue({

  el: '#app',

  data: 
  {
    inputs: [],
  },

  methods: {
    addRow() {
      this.inputs.push({
        type: this.inputType
      })
    },
    deleteRow(index) {
      this.inputs.splice(index,1)
    }
  }

});