Question

我试图从select选项中获取值并将其传递给输入字段名称，这样我就可以在按钮点击时创建不同的输入字段。

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

标记

public class Person {

private String fName;   
private String lName;   
private String empId;
// constructors, setters, getters
}

.. MAIN CLASS..

private boolean indexExists(final List <Person> list, final int index) {
    return index >= 0 && index < list.size();
}

 public void mainFunction() {
    Person per1 = new Person("fname1", "lname1", "101");        
    Person per2 = new Person("fname2", "lname2", "102");
    List<Person> allPersons = new ArrayList<>();
    allPersons.add(per1);
    allPersons.add(per2);

    System.out.println(allPersons);

    List<String> lNamesAppend = Arrays.asList("123","456","789");


    // CAN THE BELOW BE REPLACED IN JAVA8 ?

    int index = 0;
    Person person = null;
    for(String str : lNamesAppend) {
        if(indexExists(allPersons, index)) {
            person = allPersons.get(index++);

        } else {
            person = new Person("fname" + index++ , "lname" + index++, "10" + index++);
            allPersons.add(person);
        }
        person.setlName(str + index);
    }

    System.out.println(allPersons);
}

VueJS

  <div id="app">

    <ul>
      <li v-for="(input, index) in inputs">
        <input type="text" v-model="input.one">
        <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>

  </div>

JSFiddle - https://jsfiddle.net/u2r1fpu4/

Answer 1

由于您已将select输入的值绑定到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 = new Vue({

  el: '#app',

  data: 
  {
    inputs: [],
  },

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

});

Answer 2

我不确定你要完成什么，所以我只是在这里猜测

const app = new Vue({
  
  el: '#app',
  
  data: {
    inputs: [],
    selection: ""
  },
  
  methods: {
    addRow(selection) {
      this.inputs.push({
        type:selection, 
        one: ''
      })
    },
    deleteRow(index) {
      this.inputs.splice(index,1)
    }
  }
  
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="app">
    
    <ul>
      <li v-for="(input, index) in inputs">
        <input v-if="input.type === 'text'" type="text" v-model="input.one">
        <input v-else-if="input.type === 'file'" type="file" v-model="input.one">
        <input v-else-if="input.type === 'email'" type="email" v-model="input.one">
        <button @click="deleteRow(index)">Delete</button>
        {{input.type}}
      </li>
    </ul>
    
    <select v-model="selection">
      <option value="" >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(selection)">Add row</button>
    
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  
</body>
</html>

请注意，您无法执行<input :type="input.type" v-model="input.one">，而是需要设置一组v-if/v-else-if而不是

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

2 个答案: